jquery实现tab切换

来源：互联网发布：mac爱奇艺弹幕编辑：程序博客网时间：2024/05/21 16:59
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>tab切换</title>    <style>        * {            padding: 0;            margin: 0        }        body {            font-size: 12px        }        ul, li, ol {            list-style: none        }        a {            text-decoration: none        }        .clearfix {            clear: both;            overflow: hidden        }        .tab_title ul li {            float: left;            padding: 0 10px        }    </style></head><body><div id="Tab1" class="tab clearfix">    <div class="tab_title clearfix">        <ul>            <li><a target="_self" href="#" onmouseover="setTab('one',1,3)" id="one1">TAB1</a></li>            <li><a target="_self" href="#" onmouseover="setTab('one',2,3)" id="one2">TAB2</a></li>            <li><a target="_self" href="#" onmouseover="setTab('one',3,3)" id="one3">TAB3</a></li>        </ul>    </div>    <div class="tab_details clearfix">        <div id="con_one_1" style="display: block;">con_one_1</div>        <div style="display: none;" id="con_one_2">con_one_2</div>        <div style="display: none;" id="con_one_3">con_one_3</div>    </div></div><script type="text/javascript" src="js/jquery-2.2.4.min.js"></script><script type="text/javascript">    //tab切换效果    function setTab(name, cursel, n) {        for(var i = 1; i <= n; i++) {            var menu = document.getElementById(name + i);            var con = document.getElementById("con_" + name + "_" + i);            menu.className = i == cursel ? "cur" : "";            con.style.display = i == cursel ? "block" : "none";        }    }</script></body></html>
阅读全文
0 0