tab栏切换2

采用jquery.js，通过添加类名和show()、hide()方法实现tab栏切换；

简单案例如下：

HTML部分

<style>
        li{list-style: none;}
        #wrap{ 500px;height: 400px;border: 1px solid #000;}
        #resourcesTab li{ 100px;height: 40px;line-height: 40px;font-size: 18px;font-weight: bold;
            cursor: pointer;text-align: center;margin-left: -40px;}
        #resourcesTab .select{color: red;background-color: #fff3ca;}
        #resourcesL{ 100px;border: 1px solid #000;float: left;}
        #resourcesR{ 396px;height: 400px;border: 1px solid #000;float: left;}
        #resourcesR  .divContent{display: none;border-left: 1px solid #ccc;}
        #resourcesR .resourcesDiv{display: block;border-left: 1px solid #ccc;}
    </style>
<body>
<div >script部分：

<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    $('#resourcesTab li').click(function() {
        var i = $(this).index();//获取索引index
        $(this).addClass('select').siblings().removeClass('select');
        $('#resourcesR .divContent').eq(i).show().siblings().hide()
                .removeClass('resourcesDiv').siblings().addClass('resourcesDiv');
    });
</script>
效果图如下：

相关推荐