制作一个tab js切换遇到的问题

2018-2-12 22:33:23 鱼影 Forever棒(班班号码:72269312 | 分类:其他 | 浏览274次
html部分
  1.   <div class="item anchor" id="needs">
  2.           <div class="mod-title-s">服务须知</div>
  3.           <div class="article">
  4.             <div class="sp-banner service-notes">
  5.               <div class="slideTxtBox">
  6.                 <div class="hd">
  7.                   <ul id="tab" class="fb f18 tc lh32">
  8.                     <li class="on"><i class="iconfont font-safe-earphone"></i><span class="txt">服务保证</span></li>
  9.                     <li><i class="iconfont font-safe-zan"></i><span class="txt">质量保证</span></li>
  10.                     <li><i class="iconfont font-safe-retreat"></i><span class="txt">退款保证</span></li>
  11.                     <li><i class="iconfont font-safe-safe"></i><span class="txt">安全保证</span></li>
  12.                     <li><i class="iconfont font-safe-money"></i><span class="txt">价格保证</span></li>
  13.                   </ul>
  14.                 </div>
  15.                 <div class="tempWrap" style="overflow:hidden; position:relative; width:750px">
  16.                   <div class="tempWrap" style="overflow:hidden; position:relative; width:750px">
  17.                     <div id="tab_con" class="bd tc lh24 color9 f14" style="width: 6750px; position: relative; overflow: hidden; padding: 0px; margin: 0px; left: -750px;">
  18.         
  19.       <div class="bd-txt clone" style="float: left; width: 750px;">价格明码标价,网站上的价格就是实际的销售价格;行程公开透明,行程中所有自费项目都自愿参加<br>
  20.         行程一切费用,都在行程介绍中详细说明,购买产品付清款项后,不再擅自收取其他费用</div>
  21.         
  22.       <div style="float: left; width: 750px;">当您购买我们的产品后,有任何疑问可以随时拨打我们的热线电话400-2838-65,会有专人为您答疑解惑<br>
  23.         为了保证产品质量我们会对每个团的人数进行控制,并标明在页面上<br>
  24.         无论您在行程期间或者行程结束,有任何意见或者投诉,我们都会尽心尽力解决您的烦恼</div>
  25.         
  26.       <div style="float: left; width: 750px;">游学院上的旅游活动组织者,即导师、达人均经过严格的实名身份认证,被判定为在是自己的领域获得一定成就及美誉度<br>
  27.       
  28.         且有能力、专业负责,能够提供优质旅游及教学服务的个人或团体。<br>
  29.         确保行程内容是为学员用户精心打造的专属线路,坚决杜绝强迫购物等不良环节。</div>
  30.       <div style="float: left; width: 750px;">因我方任何原因导致不能正常出行的,都会无条件退款;如果因其他原因导致不能正常出行,<br>
  31.         则按照相关说公平公正办理。</div>
  32.       <div style="float: left; width: 750px;">全部旅行团供应商均经过游学院的严格审核,都是拥有正规旅游资质的旅行机构</div>
  33.                     </div>
  34.                   </div>
  35.                 </div>
  36.               </div>
  37.             </div>
复制代码


js部分:
  1.       <script type="text/javascript">
  2. var tabs=document.getElementById("tab").getElementsByTagName("li");
  3. var divs=document.getElementById("tab_con").getElementsByTagName("div");
  4. for(var i=0;i<tabs.length;i++){
  5. tabs[i].onclick=function(){change(this);}
  6. }
  7. function change(obj){
  8. for(var i=0;i<tabs.length;i++)
  9. {
  10. if(tabs[i]==obj){
  11. tabs[i].className="on";
  12. divs[i].className="bd-txt clone";
  13. }
  14. else{
  15. tabs[i].className="";
  16. divs[i].className="bd-txt";
  17. }
  18. }
  19. }
  20. </script>
复制代码
如上写的代码,不能切换,不知道是哪里出了问题
2018-2-26 20:36:12
提问者采纳
已私信联系处理!

班班学院院长(班班号码:1000,来自:班班学院