js里tab标签问题,请大神们帮忙

JavaScript022

js里tab标签问题,请大神们帮忙,第1张

JS这样写: function _nav(name, id, total, dv) {

for (var i = 1i <= totali++) {

document.getElementById(name + i).className = 'item item1'

}

dv.className = 'item item1 selected'

}

下面body里面onclick="_nav('nav_s',1,4,this)",传一个this参数

用jquery的话就一句代码 $(dv).addClass('selected').siblings().removeClass('selected')就传一个this就行了,不过一般不会把onclick写到html标签中

1、用绝对定位。把所有tab选项卡重叠放到一个位置,显示其中一个的同时,隐藏其他的

2、用浮动。所有tab选项卡放到同一行,设置左浮动,把选项卡的父级设置溢出隐藏和相对定位,监听点击事件判断要切换到哪个选项卡,进行偏移。

<!DOCTYPE html>

<html>

    

<head>

<meta http-equiv="Content-Type" content="text/html charset=UTF-8">

<script type="text/javascript" src="../js/lib/jquery-1.11.1.min.js"></script>

<title>jquery选项卡</title>

<style type="text/css">

ul,li{margin:0padding:0list-style:none}

a{outline:none}

#tabWrap{width:401pxmargin:0 autooverflow:hidden}

.tabTitle{width:400pxborder-right:1px solid #50afaeoverflow:hidden}

.tabTitle li{float:leftwidth:99pxtext-align:centerpadding:5px 0

    border:1px solid #50afaeborder-right:nonecursor:pointer}

.tabTitle li.active{background:#009ccfborder-color:#009ccf}

.tabTitle a{text-decoration:none}

.tabTitle .active a{color:#ffftext-decoration:none}

.tabCon{width:399pxoverflow:hiddenborder:1px solid #009ccfborder-top:none}

.tabCon li{overflow:hiddenpadding:5pxdisplay:none}

</style>

<script type="text/javascript">

$(function(){

    $("#tabWrap .tabTitle li").each(function(i,obj){

        $(obj).unbind('click').click(function(){

            $("#tabWrap .tabTitle li").each(function(){

                if($(this).hasClass('active')){

                    $(this).removeClass('active')

                }

            })

            $("#tabWrap .tabCon li").each(function(){

                $(this).hide()

            })

            $(obj).addClass('active')

            $("#tabWrap .tabCon li").eq(i).show()

        })

    })

})

</script>

</head>

    

<body>

    <div id="tabWrap">

        <ul class="tabTitle">

            <li class="active"><a href="###">tab1</a></li>

            <li><a href="###">tab2</a></li>

            <li><a href="###">tab3</a></li>

            <li><a href="###">tab4</a></li>

        </ul>

        <ul class="tabCon">

            <li style="display:block">tab1内容tab1内容tab1内容tab1内容tab1内容tab1内容tab1内容</li>

            <li>tab2tab2tab2tab2tab2tab2tab2tab2tab2tab2tab2</li>

            <li>tab3tab3tab3tab,3tab3tab3 tab3tab3tab3tab3tab 3tab3tab3</li>

            <li>tab4tab4tab4tab4tab4tab4tab4</li>

        </ul>

    </div>

</body>

</html>

jquery文件需要自己下一个重新引用一下