jquery编写选项卡Tab页跳转功能

前面写过用JavaScript原生代码写选项卡tab页的跳转的方法，在后来的学习工作过程中，发现并不是很实用，这里分享一个jquery的写法，比较简单，也比较容易修改套用，适合初学者学习和使用。

1、首先是菜单tab标签

使用ul-li列出菜单tab，并设置ul的class为st-menu-tab

<ul class="st-menu-tab">
    <li class="on">目录</li>
    <li>笔记</li>
    <li>答疑</li>
    <li>评论</li>
</ul>

2、然后是内容页

由于内容页内容比较自由，可以装下很多东西，所以应该考虑用div来承载，并设置大的div容器的class为st-menu-info

<div class="st-menu-info">
    <div class="on">
        <ul>
            <li class="sec-title">
                <span>第1章 简介</span>
            </li>
        </ul>
        <ul>
            <li class="sec-title">
                <span>第2章 企业核心竞争力详解</span>
            </li>
        </ul>
        <ul>
            <li class="sec-title">
                <span>第3章 员工管理</span>
            </li>
        </ul>
    </div>
    <div class="hide"><h2>笔记</h2></div>
    <div class="hide"><h2>答疑</h2></div>
    <div class="hide"><h2>评论</h2></div>
</div>

3、菜单和内容都有之后，就应该先把页面美化一下了

设计页面的css代码，代码如下：

<style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .st-menu-tab {
            display: block;
            height:30px;
            width: 350px;
            color: #fd9c15;
        }
        .st-menu-tab li {
            cursor:pointer;
            float:left;
            list-style:none;
            height:28px;
            line-height:28px;
            background-color: #A7FADE;
            border:1px solid #fd9c15;
            margin:0 3px;
            border-bottom:none;
            display:inline-block;
            width:60px;
            text-align: center;
        }
        .st-menu-tab li.on {
            border:2px solid #fd9c15;
            border-bottom: 2px solid #7FFFD4;
            font-size: 20px
        }
        .st-menu-info {
            height:200px;
            width: 350px;
            line-height: 25px;
            border:2px solid #fd9c15;
            border-top:none padding:5px;
            background-color: #7FFFD4;
        }
        .hide {display: none;}
    </style>

4、页面设计好之后，就到了主要的压轴戏了

这是使用jquery写的，那么就要先引用jquery，然后是跳转代码

<script type="text/javascript" src="script/jquery-3.1.1.js"></script>
<!--tab页跳转-->
<script type="text/javascript">
    $(document).ready(function (){
        var stMenuTab = $(".st-menu-tab li"),
                stMenuInfo= $(".st-menu-info div");
        stMenuTab.click(function() {
            var i = $(this).index();
            $(this).addClass('on').siblings().removeClass('on');
            stMenuInfo.eq(i).show().siblings().hide();
        });
    });
</script>

5、预览效果如下：

6、完整代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .st-menu-tab {
            display: block;
            height:30px;
            width: 350px;
            color: #fd9c15;
            margin-left: 50px;
            margin-top: 50px;
        }
        .st-menu-tab li {
            cursor:pointer;
            float:left;
            list-style:none;
            height:28px;
            line-height:28px;
            background-color: #A7FADE;
            border:1px solid #fd9c15;
            margin:0 3px;
            border-bottom:none;
            display:inline-block;
            width:60px;
            text-align: center;
        }
        .st-menu-tab li.on {
            border:2px solid #fd9c15;
            border-bottom: 2px solid #7FFFD4;
            font-size: 20px
        }
        .st-menu-info {
            margin-left: 50px;
            height:200px;
            width: 350px;
            line-height: 25px;
            border:2px solid #fd9c15;
            border-top:none padding:5px;
            background-color: #7FFFD4;
        }
        .hide {display: none;}
        .sec-title {
            list-style:none;
        }
    </style>
</head>
<body>

<ul class="st-menu-tab">
    <li class="on">目录</li>
    <li>笔记</li>
    <li>答疑</li>
    <li>评论</li>
</ul>
<div class="st-menu-info">
    <div class="on">
        <ul>
            <li class="sec-title">
                <span>第1章 简介</span>
            </li>
        </ul>
        <ul>
            <li class="sec-title">
                <span>第2章 企业核心竞争力详解</span>
            </li>
        </ul>
        <ul>
            <li class="sec-title">
                <span>第3章 员工管理</span>
            </li>
        </ul>
    </div>
    <div class="hide"><h2>笔记</h2></div>
    <div class="hide"><h2>答疑</h2></div>
    <div class="hide"><h2>评论</h2></div>
</div>


<script type="text/javascript" src="script/jquery-3.1.1.js"></script>
<!--tab页跳转-->
<script type="text/javascript">
    $(document).ready(function (){
        var stMenuTab = $(".st-menu-tab li"),
                stMenuInfo= $(".st-menu-info div");
        stMenuTab.click(function() {
            var i = $(this).index();
            $(this).addClass('on').siblings().removeClass('on');
            stMenuInfo.eq(i).show().siblings().hide();
        });
    });
</script>
</body>
</html>

jquery编写选项卡Tab页跳转功能

猜你喜欢