jq简易实现tab栏切换

jq简易实现tab栏切换

1,html

 <div class="box" id="tabList">
     <div class="active">1</div>
     <div>2</div>
     <div>3</div>
     <div>4</div>
 </div>

2,js

$("#tabList div").click(function () {
    $(this).addClass('active').siblings().removeClass('active');
})

3,css

.active {
  background: #4e89e9;
  color: #fff !important;
  border: none !important;
}

jq实现tab切换轮播

1.html

    <div class="container">
        <div class="nav">
            <span class="active">盒子1</span>
            <span>盒子2</span>
            <span>盒子3</span>
            <span>盒子4</span>
            <span>盒子5</span>
            <div class="clear"></div>
        </div>
        <div class="content">
            <div class="box">
                <ul>
                    <li>1</li>
                    <li>1</li>
                    <li>1</li>
                    <li>1</li>
                    <li>1</li>
                    <!--数量自己定义,只要总宽度跟content的宽度一样就好-->
                </ul>
                <ul>
                    <li>2</li>
                    <li>2</li>
                    <li>2</li>
                    <li>2</li>
                    <li>2</li>
                    <!--数量自己定义,只要总宽度跟content的宽度一样就好-->
                </ul>
                <ul>
                    <li>3</li>
                    <li>3</li>
                    <li>3</li>
                    <li>3</li>
                    <li>3</li>
                    <!--数量自己定义,只要总宽度跟content的宽度一样就好-->
                </ul>
                <ul>
                    <li>4</li>
                    <li>4</li>
                    <li>4</li>
                    <li>4</li>
                    <li>4</li>
                    <!--数量自己定义,只要总宽度跟content的宽度一样就好-->
                </ul>
                <ul>
                    <li>5</li>
                    <li>5</li>
                    <li>5</li>
                    <li>5</li>
                    <li>5</li>
                    <!--数量自己定义,只要总宽度跟content的宽度一样就好-->
                </ul>
                <!--ul可以只有一个，也就是把li放同一个里面，这里放了很多个是为了分类，比如不同的ul里面放不同的内容-->
            </div>
        </div>
    </div>

2.js

<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript">
    $(function () {
        var width = 1101; //跟外面盒子的宽度一样，或者写成 var width = $(".content").width();
        var ulNum = $(".content ul").length; //获取ul的个数
        var contentWidth = width * ulNum; //获取整个box应该的长度，刚开始box设置成了1100，但是应该把所有的ul防到一行里面去，这样box向左移动的时候才是无缝滚动
        $(".box").width(contentWidth); //给box设置宽度  .width() 是获取宽度  .width(value)是设置宽度
        $(".nav span").click(function () {
            //$(this)表示点击的这个元素 ，.addClass()表示添加的样式名称，.siblings()表示这个元素的所有兄弟级元素，此处表示span，
            // .removeClass()表示删除的样式名称
            $(this).addClass('active').siblings().removeClass('active');
            var clickNum = $(this).index(); //判断点击的是第几个span .index()方法返回第几个，从0开始算起
            var moveLeft = clickNum * width * -1; //应该向左移动的距离
            $(".box").animate({ 'left': moveLeft }, 600);  //通过操作box的left来使box向左移动， .animate 是动画函数
            //第一个参数用{}包含起来，里面的内容形式为 {'left':100,'top':100}，多个用逗号隔开，
            // 表示从当前位置移动到left为100px、top为100px的位置（即left:100px;top:100px处），
            //第二个参数为时间，表示从当前位置移动到第一个参数用时，单位为ms，1000ms=1秒
            //点击的时候一定要点开审查元素，查看box元素的行内样式
        })
    })
</script>

3.css

* {
            padding: 0;
            margin: 0
        }

        .clear {
            clear: both;
        }

        .container {
            width: 1100px;
            margin: 50px auto 0;
        }

        .container .nav {
            width: 1101px;
            border: 1px solid #ccc;
        }

        .container .nav span {
            display: block;
            width: 219px;
            border-left: 1px solid #ccc;
            text-align: center;
            line-height: 40px;
            color: #666;
            float: left;
            cursor: pointer;
        }

        .container .nav span.active {
            background: #666666;
            color: #fff;
        }

        .container .nav span:first-child {
            border: 0px
        }

        .content {
            margin-top: 20px;
            width: 1101px;
            position: relative;
            overflow: hidden;
            height: 200px;
        }

        /*定位一般设置为relative，overflow设置为hidden来隐藏外面的内容*/
        .content .box {
            position: absolute;
            width: 1101px;
            height: 200px;
        }

        /*这个定位设置为absolute, 因为要操作这个的位置来切换内容*/
        .content ul {
            float: left;
            width: 1101px;
        }

        .content ul li {
            display: block;
            height: 198px;
            width: 219px;
            float: left;
            border: 1px solid #aaa;
            text-align: center;
            line-height: 218px;
        }

        .content ul li+li {
            margin-left: -1px;
        }

希望此文章能帮助到你