Tabs

来源：互联网发布：h5斗牛源码网站编辑：程序博客网时间：2024/04/24 16:41

HTML

<div id="tab"><ul id="tabs" class="clearfix"> <li class="current" onclick="setTab(0)"><a href="#">TAB-1</a></li> <li onclick="setTab(1)"><a href="#">TAB-2</a></li> <li onclick="setTab(2)"><a href="#">TAB-3</a></li> </ul><ul id="contents">    <li class="current">Content-1</li><li class="hide">Content-2</li><li class="hide">Content-3</li><ul></div>

function setTab(n){    var tli = document.getElementById("tabs").getElementsByTagName("li");var cli = document.getElementById("contents").getElementsByTagName("li");for(var i=0;i<tli.length;i++){    tli[i].className=i==n?"current":"";cli[i].className=i==n?"current":"hide";} }

CSS

body {background: #FFF;color: #000;font: 62.5% "Lucida Grande", Verdana, Geneva, Helvetica, sans-serif;margin: 0;padding: 0;}ul{    padding:0;margin:0;list-style:none;}li{   padding:10px;}.clearfix:after {content: ".";display: block;height: 0;font-size: 0;clear: both;visibility: hidden;} .clearfix {zoom: 1;}#tab{    width:600px;margin:100px auto;}#tabs li{float:left;}.current{    background:#EEE;display:block;}.hide{    display:none;}

jQuery写法

    $(document).ready(function(){$("#contents > li").hide();$("#tabs li:first").addClass("current").show();$("#contents li:first").addClass("current").show();$("#tabs li").click(function(){   $("#contents > li").hide();   $("#tabs li").removeClass("current");   $(this).addClass("current");      var activeTab = $(this).find("a").attr("href");   $(activeTab).addClass("current").show();   });    });

HTML

<div id="tab"><ul id="tabs" class="clearfix"> <li><a href="#content_1">TAB-1</a></li><li><a href="#content_2">TAB-2</a></li><li><a href="#content_3">TAB-3</a></li></ul><ul id="contents">    <li id="content_1">Content-1</li><li id="content_2">Content-2</li><li id="content_3">Content-3</li><ul></div>

1. Javascirpt 写法在于利用setTab()函数传参数,通过参数将tabs>li与 contents>li配对.

2. jQuery写法利用href属性获取参数, 通过href参数值配对.

3. HTML有所区别