运用jQuery简化TAB样式切换代码

最新推荐文章于 2025-08-15 09:01:53 发布

weixin_30478923

最新推荐文章于 2025-08-15 09:01:53 发布

阅读量104

点赞数

CC 4.0 BY-SA版权

文章标签： javascript xhtml java ViewUI

原文链接：http://www.cnblogs.com/cgd199158/p/5573868.html

本文介绍了一种使用原生JavaScript及jQuery实现的简易Tab切换效果。通过鼠标悬停事件，可轻松实现标题与内容面板之间的切换，并展示了具体的代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原生JS代码

  window.onload = init;

        function init(){
            // 首先获得所有的标题对象-使用选择符API
            var allTitles = document.querySelectorAll("a[data-cid]");

            // 遍历它们，分别为它们绑定事件响应函数
            for(var i=0;i<allTitles.length;i++){
                allTitles[i].onmouseover = function(){
                    // 先重置所有的标题样式
                    resetTitles();

                    // 设置当前标题的焦点样式
                    this.className = "current";

                    // 再重置所有的内容面板为隐藏
                    resetContents();

                    // 显示当前对应的面板
                    var contentDiv = document.getElementById(this.getAttribute("data-cid"));
                    contentDiv.style.display = "block";
                };
            }

            function resetContents(){
                // 获得所有的内容面板对象
                var allContents = document.querySelectorAll("#content>div");
                for(var i=0;i<allContents.length;i++){
                    allContents[i].style.display = "none";
                }
            }

            // 重置标题样式
            function resetTitles(){
                for(var i=0;i<allTitles.length;i++){
                    allTitles[i].className = "";
                }
            }
        }

JQ代码

$(function(){
    var ctrl = $("li");
    for(var i=0;i<ctrl.length;i++){
        ctrl.eq(i).mouseover(function(){
            var num = $(this).attr("class").substring(3,4);//ctrl与main相对应的数
            $(this).addClass("current").siblings().removeClass("current");
            $("#main"+num).css("display","block").siblings().css("display","none");
        })
    }
});

注:利用sibling()方法可以简单有效的重置除焦点以外对象的格式.

实例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>exercise简单的TAB切换效果</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<style>
*{margin:0;padding:0;}
li{list-style:none;}
a{text-decoration:none;color:#000;}
a,p,li,div{font:14px/1.8 Microsoft;}


body {margin:150px auto 0;width:580px;height:520px;}
#ctrl ul {height:31px;border-left:1px solid #ddd;margin-top:10px;border-bottom:1px solid #ddd;}
#ctrl li {float:left;height:30px;border-right:1px solid #ddd;border-top:1px solid #ddd;line-height:31px;}
#ctrl li a {display:block;float:left;padding:0 12px;border:1px solid #fff;border-bottom:none;background:#ddd;line-height:29px;}
/*当一个标题过得焦点时*/
#ctrl .current {border-bottom:1px solid #fff;}
#ctrl .current a{background:#fff;}

#main {height:357px;border:1px solid #ddd;position:relative;border-top:none;}
#main>div {padding:9px 20px 17px 20px;position:absolute;display:none;}
#main h3 {line-height:47px;font-size:22px;color:#434142;border-bottom:1px dashed #ddd;margin-bottom:10px;}
#main>div>div {border:1px solid #ddd;padding:5px;vertical-align:middle;float:left;margin:0 18px 33px 0;}
#main p {font-size:12px;line-height:21px;}

#main #main1 {display:block;}
</style>
</head>

<body>
<h1>简单的选项卡切换效果</h1>
<div id="ctrl">
    <ul>
        <li class="tab1 current"><a href="#">Tab1</a></li>
        <li class="tab2"><a href="#">Tab2</a></li>
        <li class="tab3"><a href="#">Tab3</a></li>
        <li class="tab4"><a href="#">Tab4</a></li>
    </ul>
</div>
<div id="main">
    <div id="main1">
        <h3>选项卡1</h3>
        <div><img src="images/pic1.gif" /></div>
        <p>内容11111:Saw polecat than took bankrupt good hillbilly stew, crazy, fancy and hillbilly heap rodeo, pappy.
           Thar range saw me him sherrif nothin' shiney dirt, pigs sheep city-slickers everlastin' shotgun
           driveway. Promenade catfight fart fiddle jiggly gonna tarnation, fence, what quarrel dirty, if. Pot
           grandma crop kinfolk jezebel diesel coonskin hoosegow wirey fixin' shack good roped in. Reckon stew
           tax-collectors, grandpa tobaccee hayseed good wash tired caboodle burnin' landlord.</p>
         <p> Smokin' driveway wrestlin' go darn truck moonshine wirey cow grandpa saw, coonskin bull, java,
           huntin'.</p>
    </div>
    <div id="main2">
        <h3>选项卡2</h3>
        <div><img src="images/pic2.gif" /></div>
        <p>内容2222222:Saw polecat than took bankrupt good hillbilly stew, crazy, fancy and hillbilly heap rodeo, pappy.
           Thar range saw me him sherrif nothin' shiney dirt, pigs sheep city-slickers everlastin' shotgun
           driveway. Promenade catfight fart fiddle jiggly gonna tarnation, fence, what quarrel dirty, if. Pot
           grandma crop kinfolk jezebel diesel coonskin hoosegow wirey fixin' shack good roped in. Reckon stew
           tax-collectors, grandpa tobaccee hayseed good wash tired caboodle burnin' landlord.</p>
         <p> Smokin' driveway wrestlin' go darn truck moonshine wirey cow grandpa saw, coonskin bull, java,
           huntin'.</p>
    </div>
    <div id="main3">
        <h3>选项卡3</h3>
        <div><img src="images/pic3.gif" /></div>
        <p>内容3:Saw polecat than took bankrupt good hillbilly stew, crazy, fancy and hillbilly heap rodeo, pappy.
           Thar range saw me him sherrif nothin' shiney dirt, pigs sheep city-slickers everlastin' shotgun
           driveway. Promenade catfight fart fiddle jiggly gonna tarnation, fence, what quarrel dirty, if. Pot
           grandma crop kinfolk jezebel diesel coonskin hoosegow wirey fixin' shack good roped in. Reckon stew
           tax-collectors, grandpa tobaccee hayseed good wash tired caboodle burnin' landlord.</p>
         <p> Smokin' driveway wrestlin' go darn truck moonshine wirey cow grandpa saw, coonskin bull, java,
           huntin'.</p>
    </div>
    <div id="main4">
        <h3>选项卡4</h3>
        <div><img src="images/pic4.gif" /></div>
        <p>内容4:Saw polecat than took bankrupt good hillbilly stew, crazy, fancy and hillbilly heap rodeo, pappy.
           Thar range saw me him sherrif nothin' shiney dirt, pigs sheep city-slickers everlastin' shotgun
           driveway. Promenade catfight fart fiddle jiggly gonna tarnation, fence, what quarrel dirty, if. Pot
           grandma crop kinfolk jezebel diesel coonskin hoosegow wirey fixin' shack good roped in. Reckon stew
           tax-collectors, grandpa tobaccee hayseed good wash tired caboodle burnin' landlord.</p>
         <p> Smokin' driveway wrestlin' go darn truck moonshine wirey cow grandpa saw, coonskin bull, java,
           huntin'.</p>
    </div>
</div>
<script>
$(function(){
    var ctrl = $("li");
    for(var i=0;i<ctrl.length;i++){
        ctrl.eq(i).mouseover(function(){
            var num = $(this).attr("class").substring(3,4);//ctrl与main相对应的数
            $(this).addClass("current").siblings().removeClass("current");
            $("#main"+num).css("display","block").siblings().css("display","none");
        })
    }
});
</script>
</body>
</html>