简约切换效果

来源:互联网   编辑:思良  发表时间:2021-05-30  关注度:  

jquery-1.7.2.min.js很好找到,基本上有特效的网页都用,比如本站的,下面的代码没有CSS,可以自己添加,比如效果:vJH桑客游

image.pngvJH桑客游

具体代码:vJH桑客游

<table width="100%" border="1">
  <tr>
    <th scope="row"><ul id="tabs">
      <li><a href="#" name="#tab1">One</a></li>
      <li><a href="#" name="#tab2">Two</a></li>
      <li><a href="#" name="#tab3">Three</a></li>
      <li><a href="#" name="#tab4">Four</a></li>    
  </ul></th>
    <td><div id="content">
      <div id="tab1">
         1111
      </div>
      <div id="tab2">
         2222   
      </div>
      <div id="tab3">
          3333
      </div>
      <div id="tab4">
         444   
      </div>
  </div></td>
  
  </tr>
</table>
<script src="js/jquery-1.7.2.min.js"></script>

  <script>
    function resetTabs(){
        $("#content > div").hide(); //Hide all content
        $("#tabs a").attr("id",""); //Reset id's      
    }

    var myUrl = window.location.href; //get URL
    var myUrlTab = myUrl.substring(myUrl.indexOf("#")); // For localhost/tabs.html#tab2, myUrlTab = #tab2     
    var myUrlTabName = myUrlTab.substring(0,4); // For the above example, myUrlTabName = #tab

    (function(){
        $("#content > div").hide(); // Initially hide all content
        $("#tabs li:first a").attr("id","current"); // Activate first tab
        $("#content > div:first").fadeIn(); // Show first tab content
        
        $("#tabs a").on("click",function(e) {
            e.preventDefault();
            if ($(this).attr("id") == "current"){ //detection for current tab
             return       
            }
            else{             
            resetTabs();
            $(this).attr("id","current"); // Activate this
            $($(this).attr('name')).fadeIn(); // Show content for current tab
            }
        });

        for (i = 1; i <= $("#tabs li").length; i++) {
          if (myUrlTab == myUrlTabName + i) {
              resetTabs();
              $("a[name='"+myUrlTab+"']").attr("id","current"); // Activate url tab
              $(myUrlTab).fadeIn(); // Show url tab content        
          }
        }
    })()
  </script>


vJH桑客游

    桑客游所有【原创】作品,均为站长手写代码。部分模板代码、教材来源于自互联网,

    如有侵权,出示著作权证书联系站长删除(微信在下面)。如果本站资源对你有用,感谢打赏!


下一篇:返回列表


上一篇:返回列表


小提示:按 回车[Enter]键 返回,按 ←键 返回上一页, 按 →键 进入下一页。