jquery实现具有嵌套功能的选项卡_jquery

关于选项卡功能大家一定都不会陌生,无非就是鼠标点击或者悬浮能够切换相关的内容。
通常情况下,大家见到的选项卡都是没有嵌套功能的,也就是说就是完成了一层切换效果,本章节分享一段代码实例,实现了选项卡的嵌套功能,也就是选项卡中嵌套有选项卡功能,也就能够容纳更多的内容。
代码如下:

<head>
<meta charset="gb2312">
<title>jquery选项卡</title>
<style type="text/css">
body, ul, li, div, a{
 margin:0px;
 padding:0px;
}
body{
 margin-top:10px;
 margin-left:15px;
}
#all{
 border-left:1px solid #ccc;
 border-right:1px solid #ccc;
 border-bottom:1px solid #ccc;
 width:255px;
}
#title li{
 float:left;
 list-style:none;
 width:50px;
 border-top:2px solid #f60;
 border-right:1px solid #ccc;
 text-align:center;
 padding-top:3px;
}
#title li:last-child{
 border-right:1px solid #fff;
}
.new{
 border-bottom:1px solid #fff;
 color:#f60;
}
.old{
 border-bottom:1px solid #ccc;
}
#content{
 clear:both;
}
#content ul{
 margin-left:5px;
 list-style:none;
 float:left;
}
#content li{
 width:40px;
 height:30px;
 background-color:#f60;
 text-align:center;
 color:#fff;
}
.inContent{
 width:205px;
 height:90px;
 background-color:#f6c;
 margin-left:50px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
 $("#title li:first").addClass("new").siblings().addClass("old");
 $("#content div:first").show().siblings().hide();
 $(".inContent:first").show().siblings().hide();
 $("#title li").click(function(){
  $(this).addClass("new").removeClass("old").siblings().addClass("old").removeClass("new");
  $(".info").hide().eq($("#title li").index(this)).show();
  $(".info div:first-child").show().siblings().hide();
 }); 

 $(".info li").mouseover(function(){
  $(this).css("color","#20f");
  $(".inContent").hide().eq($(".info li").index(this)).show();
 });
 $(".info li").mouseout(function(){
  $(this).css("color","#fff");
 });
});
</script>
</head>
<body>
<div id="all">
 <div id="title">
  <ul>
   <li>要闻</li>
   <li>国内</li>
   <li>时尚</li>
   <li>旅游</li>
   <li>科技</li>
  </ul>
 </div>
 <div id="content">
  <div style="clear:both;" class="info">
   <ul>
    <li>01</li>
    <li>02</li>
    <li>03</li>
   </ul>
   <div>
    <div class="inContent">A1</div>
    <div class="inContent">B1</div>
    <div class="inContent">C1</div>
   </div>
  </div>
  <div class="info">
   <ul>
    <li>01</li>
    <li>02</li>
    <li>03</li>
   </ul>
   <div>
    <div class="inContent">A2</div>
    <div class="inContent">B2</div>
    <div class="inContent">C2</div>
   </div>
  </div>
  <div class="info">
   <ul>
    <li>01</li>
    <li>02</li>
    <li>03</li>
   </ul>
   <div>
    <div class="inContent">A3</div>
    <div class="inContent">B3</div>
    <div class="inContent">C3</div>
   </div>
  </div>
  <div class="info">
   <ul>
    <li>01</li>
    <li>02</li>
    <li>03</li>
   </ul>
   <div>
    <div class="inContent">A4</div>
    <div class="inContent">B4</div>
    <div class="inContent">C4</div>
   </div>
  </div>
  <div class="info">
   <ul>
    <li>01</li>
    <li>02</li>
    <li>03</li>
   </ul>
   <div>
    <div class="inContent">A5</div>
    <div class="inContent">B5</div>
    <div class="inContent">C5</div>
   </div>
  </div>
 </div>
</div>
</body>
</html>

上面的代码实现了选项卡的嵌套功能,下面介绍一下它的实现过程。
一.实现原理:
原理其实非常的简单,其实就是大的选项卡里面套了一个小的选项卡,先进行大的选项卡的切换,然后再进行小的选项卡的切换,就是这么简单,这里就不多介绍了,具体可以看代码注释。
二.代码注释:
1.$(function(){}),文档结构完全加载完毕再去执行函数中的代码。
2.$("#title li:first").addClass("new").siblings().addClass("old"),在默认状态下,为id属性值为title的元素下第一个li元素添加名为new的class类,然后为其他的兄弟li元素添加old的class类。也就是在默认状态下横向的选项卡第一个字体是红色,其他的都是黑色。
3.$("#content div:first").show().siblings().hide(),将id为content下第一个div设置为显示,其他的兄弟元素隐藏。
4.$(".inContent:first").show().siblings().hide(),将class属性值为inContent的第一个元素设置为显示,兄弟元素隐藏。
5.$("#title li").click(function(){}),为相应的li元素注册click事件处理函数。
6.$(this).addClass("new").removeClass("old").siblings().addClass("old").removeClass("new"),如果点击顶部的li元素的话,会为当前li元素添加名为new的class类,然后删除名为old的class类,然后将其他兄弟元素添加名为old的class类,删除名为new的class类。
7.$(".info").hide().eq($("#title li").index(this)).show(),首先将class名为info的元素隐藏,然后将对应索引的元素显示。
8.$(".info div:first-child").show().siblings().hide(),将info下面的div元素下的第一个子元素设置为显示,其他的元素隐藏。

以上就是本文的详细内容,希望对大家实现jquery选项卡有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery选项卡
jquery实现选项卡切换、jquery实现选项卡、jquery实现选项卡效果、jquery怎么实现选项卡、jquery实现tab选项卡,以便于您获取更多的相关知识。

时间: 2024-10-31 13:55:12

jquery实现具有嵌套功能的选项卡_jquery的相关文章

jQuery实现简单倒计时功能的方法_jquery

本文实例讲述了jQuery实现简单倒计时功能的方法.分享给大家供大家参考,具体如下: 1.效果图如下: 2.html代码: <div class="timeFix"> <div class="daojishi" id="09/04/2016 00:00:00"> <span class="timeh"></span> <span class="timem"

jQuery EasyUI右键菜单实现关闭标签/选项卡_jquery

本文实例为大家分享了jQuery EasyUI右键菜单可以选择关闭标签/选项卡操作,供大家参考,具体内容如下 目录结构: noContextMenu.js 文件内容如下: $(function(){ //屏蔽右键菜单 $(document).bind("contextmenu", function(e){ return false; }); }); 效果图: 方式一: <%@ page language="java" import="java.uti

jquery实现网页查找功能示例分享_jquery

本文以查找车站名为例,仿12306官网查找车站售票时间页面效果,当用户输入关键字点击查找按钮或按回车键时,jQuery通过正则匹配内容,准确匹配关键字,并迅速将页面定位滚动到第一个匹配的位置,并显示相关信息(本例中附加信息为车站开始售票时间). HTML页面需要放置一个输入框用来输入要查找的关键字,以及一个查找按钮,然后就是主体内容#content,里面包含着n个<p>,即每个时间段开售车票的车站名.  复制代码 代码如下: <div id="search_box"&

jQuery实现倒计时按钮功能代码分享_jquery

代码一: { wait:90, hsTime:function(that){ if (this.wait == 0) { $('#hsbtn').removeAttr("disabled").val('重发短信验证码'); this.wait = 90; } else { var _this = this; $(that).attr("disabled", true).val('在'+_this.wait+'秒后点此重发'); _this.wait--; setTi

JQuery 网站换肤功能实现代码_jquery

从那以后,我找到了很多可以让访客通过鼠标点击某个地方切换样式表的方法.但最近我要写一篇如何 使用jQuery编写简单代码实现它的教程. 我将向你们逐步解说整个的过程,不仅仅因为要展示jQuery代码的简介,同时也要揭示jQuery库中的若干高级特性. 首先,代码 复制代码 代码如下: $(document).ready(function() { $('.styleswitch').click(function() { switchStylestyle(this.getAttribute("rel

基于Jquery与WebMethod投票功能实现代码_jquery

1:功能描述 1)最好是若干个星星组成,用户投票时候只要鼠标点击星星就可以实现投票,可以自定义星星个数 2)未投票.投票中.完成投票,星星的样式不同 3)每个星星的都可以自定义提示 比如 "差" "一般" "还好" "不错" 4)完成投票后,动画展示投票结果并且不可再投票 2:思路描述 1.3)使用循环,最大值是星星的个数,每次循环添加一条<a></a>的语句,这条超链接通过Class指定星星样式,通过

jquery异步循环获取功能实现代码_jquery

html代码: 复制代码 代码如下: <table id="repTable"--> -- <span id="<%# Eval("Id") %>" class="address"></span> </table> jquery代码: 复制代码 代码如下: $(document).ready(function(){ $("#repTable span.add

JQuery实现带排序功能的权限选择实例_jquery

本文实例讲述了JQuery实现带排序功能的权限选择.分享给大家供大家参考.具体实现方法如下: <!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">

基于jQuery实现网页打印功能_jquery

直接上代码 <!DOCTYPE html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>index</title> </head> <body> <div style="text-align:cent