07利用jquery实现tab选项卡切换

1.1 介绍

这里提供了一种实现选项卡的思路。在实现过程中首先考虑的是html结构，元素如何摆放，此外通过这样的摆放，通过CSS样式是否可以达到我们所要的效果。最后通过js进行监听，当进行选项卡切换时，我们可以对所有内容进行隐藏，之后再对选中的内容进行显示以达到切换的效果。

1.2 实现的HTML结构

<div id="app">
    <ul id="tab-tilte" class="tab-tilte">
        <li class="active">标题一</li>
        <li>标题二</li>
        <li>标题三</li>
        <li>标题四</li>
    </ul>
    <div class="tab-content" id="tab-content">
        <div class="cur">内容一</div>
        <div>内容二</div>
        <div>内容三</div>
        <div>内容四</div>
    </div>
</div>

1.3实现的CSS样式

<style type="text/css">
    ul li {

        margin: 0;
        padding: 0;
        list-style: none;
    }
    #app {
        width: 600px;
        height: 400px;
        margin: 0 auto;
        border: 1px solid #ccc;
    }
    .tab-tilte {
        width: 90%;
    }
    .tab-tilte li {
        float: left;
        width: 25%;
        padding: 10px 0;
        text-align: center;
        background-color: #f4f4f4;
        cursor: pointer;
    }
    /* 点击对应的标题添加对应的背景颜色 */
    .tab-tilte .active {

        background-color: #09f;
        color: #fff;
    }

    .tab-content div {

        float: left;
        width: 25%;
        line-height: 100px;
        text-align: center;
        display: none;
    }
    .tab-content div.cur{

        display: block;
    }
</style>

展示的静态效果（没有动效）:

image.png

1.4引入jquery实现点击切换

<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
  
    $(document).ready(function(){

        $('#tab-tilte li').click(function(){

           var cur=$(this).index(); //获取当前点击tab标题的索引值
            tabFun(cur);//调用方法
        });
    });

    function  tabFun(cur){
      
        $('#tab-tilte li').eq(cur).addClass('active').siblings().removeClass('active');
        $('#tab-content div').eq(cur).addClass('cur').siblings().removeClass('cur');

    }
</script>

最终显示效果：

image.png

转载于:https://www.jianshu.com/p/a31aceced140