JQUERY实现TAB切换

来源：互联网发布：网络诈骗报警流程编辑：程序博客网时间：2024/05/20 09:08

博主是一枚前端小菜鸟，因为挺长时间没接触页面布局了，居然连tab栏切换都给忘了，后来博主看了一些前端资料还有书，发现网上的很多方法都杂乱无章，看的云里雾里的，冗余代码太多，这让新手小白会很苦恼，所以博主想自己通过小菜鸟的视角来写一个用jquery实现的tab栏切换，而且复制粘贴代码到你们自己的编辑器，就能直接查看效果的哦，非常方便比心♥♥，喜欢博主写的文章的可以顶一下，或者再底下评论哈，让我知道你们的存在，让我们共同进步！

好了，废话不多说，直接上代码！

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style type="text/css">        * {            margin: 0;            padding: 0;        }        ul {            list-style: none;        }        .wrapper {            width: 1000px;            height: 475px;            margin: 0 auto;            margin-top: 100px;        }        .tab {            border: 1px solid #ddd;            border-bottom: 0;            height: 36px;            width: 320px;        }        .tab li {            position: relative;            float: left;            width: 80px;            height: 34px;            line-height: 34px;            text-align: center;            cursor: pointer;            border-top: 4px solid #fff;        }        .tab span {            position: absolute;            right: 0;            top: 10px;            background: #ddd;            width: 1px;            height: 14px;            overflow: hidden;        }        .products {            width: 1002px;            border: 1px solid #ddd;            height: 476px;        }        .products .main {            float: left;            display: none;        }        .products .main.selected {            display: block;        }        .tab li.active {            border-color: red;            border-bottom: 0;        }    </style>    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script></head><body><div class="wrapper">    <ul class="tab">        <li class="tab-item active">标题1♥</li>        <li class="tab-item">标题2♥</li>        <li class="tab-item">标题3♥</li>        <li class="tab-item">标题4♥</li>    </ul>    <div class="products">        <div class="main selected">            <span class="a">1</span>        </div>        <div class="main">            <span class="a">2</span>        </div>        <div class="main">            <span class="a">3</span>        </div>        <div class="main">            <span class="a">4</span>        </div>    </div></div></body>    <script>        $(function () {            $(".wrapper .tab-item").click(function () {                $(this).addClass("active").siblings().removeClass("active");                $(".products .main").eq($(this).index()).show().siblings().hide();            })        })    </script></html>

具体效果看gif！
这里写图片描述
样式亲们可以自由发挥哦！

阅读全文

0 0