关于tab布局的缺陷问题
0
所有回答(3)
1
请上代码和效果
<body>
<header class="aui-bar aui-bar-nav" id="aui-header">
<a class="aui-btn aui-pull-left" >
<span class="aui-iconfont aui-icon-left"></span>
</a>
<a class="aui-pull-left">
<span class="aui-iconfont aui-icon-left"></span>
</a>
<div class="aui-title"><%=view.title %></div>
</header>
<div class="weui-panel weui-panel_access" style="margin-top: 10px;">
<div class="aui-tab" id="tab">
<div class="aui-tab-item aui-active">产品</div>
<div class="aui-tab-item ">详情</div>
</div>
</div>
<section class="aui-content" id="tab2">
<div class="aui-card-list-content">
<div class="aui-row aui-row-padded">
<%=view.content %>
</div>
</div>
</section>
<header class="header">
<a href="javascript:history.back();" class="back"></a>
<a href="javascript: void(0)" class="menu"></a>
</header>
<section class="aui-content" id="tab1">
<div class="aui-card-list-content">
<div class="aui-row aui-row-padded">
<!-- 轮播开始 -->
<div id="bigpic">
<div id="cell">
<section class="turn">
<span class="alreadBought j_alreadBought"></span>
<section id="slider">
<ul class="top-slider" style="width: 200%;">
<li style="width: 50%">
<a>
<img src="<%=view.img_url %>"/>
</a>
</li>
<li style="width: 50%">
<a>
<img class="lazy" imgsrc="picture/1175058095-2_e_1.jpg">
</a>
</li>
</ul>
<div class="dot">
<ul>
<li class="on"></li>
<li></li>
</ul>
</div>
</section>
</section>
</div>
</div>
<!-- 轮播结束 -->
<!-- 详情区域开始 -->
<section class="detail j_detail">
<article>商品标题</article>
<div class="product_subname" style="-webkit-line-clamp: 1;"></div>
<div class="left">
<b>¥<span id="main_price">商品价格</span></b>
<aside>
<span class="j_second_promo_icon" display: none;"></span>
</aside>
</div>
</section>
<!-- 数量开始 -->
<section class="quantity">
<h4>数量：</h4>
<div class="number_con">
<span class="minus">-</span>
<div class="input">
<input id="buy_num" type="text" value="1" />
</div>
<span class="plus on">+</span>
</div>
</section>
<!-- 数量结束 -->
<!-- 图文详情开始 -->
<section class="jump">
<a id='detail_link' class="arrow_con">
<div class="arrow">
<h4>图文详情</h4>
</div>
</a>
</section>
<section class="shop">
<a href="http://shop.m.dangdang.com/18845.html?t=1501558387">
<div class="shop_con arrow_con evaluate">
<div class="arrow">
<div class="logo">
<img src="../picture/201702231127361.jpg" alt="银泰百货当当旗舰店" />
</div>
<div class="name">店铺名称</div>
</div>
</div>
</a>
</section>
<div class="fixed_icons">
<a class="goTop" style="display: none;" href="javascript:scrollTo(0,0);">返回顶部</a>
</div>
<footer class="footer new">
<nav class="b-nav">
<p>
评论
</p>
</nav>
<section class="status-bar">
<div class="actions-wrap">
</div>
<a class="top" href="javascript:scrollTo(0,0);">TOP</a>
</section>
</footer>
<script>
var ddad = 1;
</script>
</div>
</div>
</section>
<script src="../script/aui-tab.js"></script>
<script src="../script/zepto.min.js"></script>
<script type="text/javascript">
apiready = function () {
api.parseTapmode();
$("#tab2").hide();
}
var tab = new auiTab({
element: document.getElementById("tab"),
}, function (ret) {
var index = ret.index;
if (index == 1) {
$("#tab1").show();
$("#tab2").hide();
} else {
$("#tab2").show();
$("#tab1").hide();
}
});
</script>
</body>
</html>
1
请说下您的问题？
请看我的补充
0
没人会 ....
