jquery writing tab page jump function

I have written before about how to use JavaScript native code to write tab page jumps. During the subsequent study and work, I found that it is not very practical. Here is a jquery writing method. It is relatively simple and easy to modify and apply. It is suitable for beginners. Scholars learn and use.

1. The first is the menu tab label

Use ul-li to list menu tabs, and set the class of ul to st-menu-tab

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

2. Then there is the content page

Since the content of the content page is relatively free and can hold a lot of things, you should consider using divs to host it, and set the class of the large div container to 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. After you have the menu and content, you should first beautify the page.

The css code for the design page is as follows:

<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. After the page is designed, it’s time for the main finale.

This is written using jquery, so jquery must be quoted first, and then the jump code

<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. The preview effect is as follows:

6. The complete code is as follows:

<!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 writing tab page jump function

Guess you like