随手用JQ写个选项卡

<div class="box">
    <ul>
        <li class="one">选项卡1</li>
        <li>选项卡2</li>
        <li>选项卡3</li>
    </ul>
    <div class="content">
        <div class="ct">菜单1</div>
        <div class="ct">菜单2</div>
        <div class="ct">菜单3</div>
    </div>
</div>

$(document).ready(function(){//jq入口
    $('.ct:gt(0)').hide();//gt()选择器，选中索引后的全部

    var tab = $('.box ul li');//定义是为了后面写的方便
    tab.click(function(){//选项卡当然是基于点击的
        $(this).addClass('one').siblings().removeClass('one');//选中的项，加一个选中的样式，兄弟删除该样式的类名

        var tab_index = tab .index(this);//.index()定义选项卡的索引
        $('.ct').eq(tab_index).show().siblings().hide();//把内容关联选项卡的索引，使内容随选项卡被点击而产生变化  ||  eq()选择器，选中该索引的项

    });
});

别忘了引入jq

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

转载于:https://www.cnblogs.com/iampengl/p/9238580.html