运用jQuery简化TAB样式切换代码
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了运用jQuery简化TAB样式切换代码相关的知识，希望对你有一定的参考价值。
原生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>
最终效果:
以上是关于运用jQuery简化TAB样式切换代码的主要内容，如果未能解决你的问题，请参考以下文章