首页 新闻 搜索 专区 学院

关于tab布局的缺陷问题

0
悬赏园豆:50 [已关闭问题] 关闭于 2017-08-31 10:09

当我页面第一次加载的时候我的tab1会同时加载tab1和tab2的页面,然后我点击tab2在点击tab1页面又恢复正常

问题补充:

高星星同学的主页 高星星同学 | 初学一级 | 园豆:148
提问于:2017-08-18 11:37
< >
分享
所有回答(3)
1

请上代码和效果

吴瑞祥 | 园豆:29187 (高人七级) | 2017-08-18 11:56

<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>&yen;<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>

支持(0) 反对(0) 高星星同学 | 园豆:148 (初学一级) | 2017-08-18 14:23
1

请说下您的问题?

金琥 | 园豆:2570 (老鸟四级) | 2017-08-18 13:55

请看我的补充

支持(0) 反对(0) 高星星同学 | 园豆:148 (初学一级) | 2017-08-18 14:31
0

没人会  ....

高星星同学 | 园豆:148 (初学一级) | 2017-08-31 10:09
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册