正文
jquery选项卡,jquery选项卡代码
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
jquery选项卡，让选项卡独立运行，互不影响
!DOCTYPE
html
head
meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /
style
* {
border: none;
margin: 0;
padding: 0;
font-size: 12px;
font-weight: normal;
font-style: normal;
text-align: left;
font-family: "宋体", Arial, Helvetica, sans-serif !important;
}
a {
text-decoration: none;
color: #002244;
}
a:visited {
color: #5f789e;
}
a:hover {
text-decoration: underline;
color: #cd0200;
}
ul,li {
list-style-type: none;
}
/* 正文开始*/
#mainbody {
width: 1000px;
margin-top: 12px;
margin-right: auto;
margin-bottom: 12px;
margin-left: auto;
}
#mainbody .part {
margin-bottom: 10px;
margin-right: 10px;
width: 322px;
float: left;
transition: all 0.3s ease;
-moz-transition: all 0.3s ease; /* Firefox 4 */
-webkit-transition: all 0.3s ease; /* Safari 和 Chrome */
-o-transition: all 0.3s ease; /* Opera */
}
#mainbody .part:hover {
box-shadow: 2px 2px 3px #ddd;
}
#mainbody .part .part-hd {
height: 32px;
zoom: 1;
overflow: hidden;
line-height: 32px;
}
#mainbody .part-hd li {
font-size: 14px;
line-height: 30px;
width: 155px;
background: -webkit-gradient(linear, left top, left bottom, from(#fefefe),
to(#ededed) );
background: -o-linear-gradient(left top, left bottom, from(#fefefe),
to(#ededed) );
background: -webkit-gradient(linear, left top, left bottom, from(#fefefe),
to(#ededed) );
border: 1px solid #ddd;
float: left;
text-align: center;
background-color: -webkit-gradient;
background-position: left;
}
#mainbody .part-hd li.on {
border-bottom-style: none;
font-weight: bold;
background-color: #FFFFFF;
background-image: url(yxzoo2.png);
background-repeat: no-repeat;
background-position: -165px -265px;
}
#mainbody .imgshow {
border: 1px solid #ccc;
border-top: 0 none;
padding: 8px;
zoom: 1;
color: #000000;
}
.mod-art li {
line-height: 25px;
height: 25px;
}
.mod-art .date {
float: right;
margin-right: 5px;
}
/style
/head
script src=""/script
script
$ (function ()
{
$ ('#part-tab-con .imgshow:nth-child(1)').show ().siblings ().hide ();
$ ('.part-hd ul li').hover (
function ()
{
var me = $ (this);
me.addClass ('on').siblings ("li").removeClass ('on')
.closest (".part-hd").next ("#part-tab-con")
.children (".imgshow:eq(" + me.index () + ")").show ().siblings (".imgshow").hide ();
});
});
/script
body
div id="mainbody"
div class="part"
div class="part-hd"
ul
li class="on"玄幻奇幻/li
li武侠仙侠/li
/ul
/div
div id="part-tab-con"
div class="imgshow"
ul class="mod-art"
lispan class="date"02-16/spana href="/1502/288021391312.html" title="教练进场Ban选！比赛更精彩 观众受益"font color=""教练进场Ban选！比赛更精彩
观众受益/font /a/li
lispan class="date"02-16/spana href="/1502/288009340360.html" title="人家女友：国外女玩家为锐雯重铸断剑"font color=""人家女友：国外女玩家为锐雯重铸断剑/font
/a/li
lispan class="date"02-16/spana href="/1502/288007089075.html" title="福利COS：香港正妹Bell全方位展示胸器"font color=""福利COS：香港正妹Bell全方位展示胸器/font
/a/li
lispan class="date"02-16/spana href="/1502/288010819654.html" title="日本LJL获外卡赛资格 季中赛或将参赛"font color=""日本LJL获外卡赛资格
季中赛或将参赛/font /a/li
lispan class="date"02-16/spana href="/1502/288008186913.html" title="网友盘点：最让人恶心的五大偷塔英雄"font color=""网友盘点：最让人恶心的五大偷塔英雄/font
/a/li
/ul
/div
div class="imgshow"
ul class="mod-art"
lispan class="date"02-16/spana href="/1502/288007138257.html" title="安妮情人节限定半价 其余三款正热销中"font color=""安妮情人节限定半价
其余三款正热销中/font /a/li
lispan class="date"02-16/spana href="/1502/287982376070.html" title="每周之星：大树好辅助Imp男枪打爆全场"font color=""每周之星：大树好辅助Imp男枪打爆全场/font
/a/li
lispan class="date"02-16/spana href="/1502/288025318751.html" title="2015LCS北美赛区春季赛：CLG VS TSM"font color=""2015LCS北美赛区春季赛：CLG
VS TSM/font /a/li
lispan class="date"02-16/spana href="/1502/288023188668.html" title="杰克：牛头努努大战三百回合 竟无一伤亡"font color=""杰克：牛头努努大战三百回合
竟无一伤亡/font /a/li
lispan class="date"02-16/spana href="/1502/288022680398.html" title="每日精彩集锦：大魔王教你如何秀妖姬！"font color=""每日精彩集锦：大魔王教你如何秀妖姬！/font
/a/li
/ul
/div
/div
/div
div class="part"
div class="part-hd"
ul
li class="on"666/li
li5555/li
/ul
/div
div id="part-tab-con"
div class="imgshow"
ul class="mod-art"
lispan class="date"02-16/spana href="/1502/288022168482.html" title="LPL第五周掠影：年关将近队员喜庆服饰"font color=""LPL第五周掠影：年关将近队员喜庆服饰/font
/a/li
lispan class="date"02-16/spana href="/1502/288021294370.html" title="黑子解说：吓老子一跳 上单船长怒吼凯瑞"font color=""黑子解说：吓老子一跳
上单船长怒吼凯瑞/font /a/li
lispan class="date"02-16/spana href="/1502/288020471263.html" title="Dopa盲僧我不是标题党 我是国服rank第一"font color=""Dopa盲僧我不是标题党
我是国服rank第一/font /a/li
lispan class="date"02-16/spana href="/1502/288020025966.html" title="ADC新年特别版：各种极限走砍 看完湿了"font color=""ADC新年特别版：各种极限走砍
看完湿了/font /a/li
lispan class="date"02-16/spana href="/1502/288013215453.html" title="囧镜头：武器死里逃生却惨遭提莫暗算"font color=""囧镜头：武器死里逃生却惨遭提莫暗算/font
/a/li
/ul
/div
div class="imgshow"
ul class="mod-art"
lispan class="date"02-16/spana href="/1502/288013050053.html" title="精彩瞬间：智商碾压 卡萨丁无敌草丛战"font color=""精彩瞬间：智商碾压
卡萨丁无敌草丛战/font /a/li
lispan class="date"02-16/spana href="/1502/288011180111.html" title="国民好辅助：上分神器锤石 我来助你超神"font color=""国民好辅助：上分神器锤石
我来助你超神/font /a/li
lispan class="date"02-16/spana href="/1502/288010246239.html" title="COS娱乐解说：机器人布里茨 超神辅助C"font color=""COS娱乐解说：机器人布里茨
超神辅助C/font /a/li
lispan class="date"02-16/spana href="/1502/288009730710.html" title="JJ辰解说：教你剑姬抗压 让你两头又如何"font color=""JJ辰解说：教你剑姬抗压
让你两头又如何/font /a/li
lispan class="date"02-16/spana href="/1502/288009230284.html" title="轻松一刻：这脚速 闪现都被吓出来了！"font color=""轻松一刻：这脚速
闪现都被吓出来了！/font /a/li
/ul
/div
/div
/div
div class="part"
div class="part-hd"
ul
li class="on"7777/li
li武侠仙侠/li
/ul
/div
div id="part-tab-con"
div class="imgshow"
ul class="mod-art"
lispan class="date"02-16/spana href="/1502/288021391312.html" title="教练进场Ban选！比赛更精彩 观众受益"font color=""教练进场Ban选！比赛更精彩
观众受益/font /a/li
lispan class="date"02-16/spana href="/1502/288009340360.html" title="人家女友：国外女玩家为锐雯重铸断剑"font color=""人家女友：国外女玩家为锐雯重铸断剑/font
/a/li
lispan class="date"02-16/spana href="/1502/288007089075.html" title="福利COS：香港正妹Bell全方位展示胸器"font color=""福利COS：香港正妹Bell全方位展示胸器/font
/a/li
lispan class="date"02-16/spana href="/1502/288010819654.html" title="日本LJL获外卡赛资格 季中赛或将参赛"font color=""日本LJL获外卡赛资格
季中赛或将参赛/font /a/li
lispan class="date"02-16/spana href="/1502/288008186913.html" title="网友盘点：最让人恶心的五大偷塔英雄"font color=""网友盘点：最让人恶心的五大偷塔英雄/font
/a/li
/ul
/div
div class="imgshow"
ul class="mod-art"
lispan class="date"02-16/spana href="/1502/288008554915.html" title="猫儿解说：青铜爬坑系列 德玛西亚皇子"font color=""猫儿解说：青铜爬坑系列
德玛西亚皇子/font /a/li
lispan class="date"02-16/spana href="/1502/288008064553.html" title="精彩集锦TOP5：杀戮锐雯万军丛中豪取4杀"font color=""精彩集锦TOP5：杀戮锐雯万军丛中豪取4杀/font
/a/li
lispan class="date"02-16/spana href="/1502/288007684920.html" title="原凉教研室：套子VS突脸 莫甘娜专治突脸"font color=""原凉教研室：套子VS突脸
莫甘娜专治突脸/font /a/li
lispan class="date"02-16/spana href="/1502/288006698807.html" title="土豆怪兽TOP5：原来蛮王的E可以砍死队友"font color=""土豆怪兽TOP5：原来蛮王的E可以砍死队友/font
/a/li
lispan class="date"02-16/spana href="/1502/288006443654.html" title="大神去哪儿：国服阿卡利14血 1V3秀翻天"font color=""大神去哪儿：国服阿卡利14血
1V3秀翻天/font /a/li
/ul
/div
/div
/div
/div
/body
/html
相关问答
Q1: 请问一个jQuery选项卡怎么写啊？
首先如题，你的class必须是一 一对应的，就是说按钮是的class是tab1，那么与之对应的div里面也必须是tab1，如果不符合这点，以下jq代码不会生效，第二点，我给你的ul加了个id，方便选取元素。
html:
jq:
Q2: jquery 每个选项卡 都有一个轮播图 第一个选项卡轮播图 轮播完后去执行第二个隐藏的轮播图了
你不想执行第二个，就要在代码中，增加控制。用幻灯片的div id限定范围。
比如：$("#slideshow1 img") //第一个。$("#slideshow2 img")//第二个
Q3: JQuery 如何实现“选项卡”点击切换？ 求JQuery 点击事件代码，是点击不是鼠标滑过切换。谢谢！！高分
$(function() {
//选项卡
$(".order_list ul li").click(function() {
$(this).addClass("on").siblings().removeClass("on"); //切换选中的按钮高亮状态(添加on)
var index = $(this).index(); //获取被按下按钮的索引值，需要注意index是从0开始的
$(".order_xxk div").eq(index).show().siblings().hide(); //在按钮选中时在下面显示相应的内容，同时隐藏不需要的框架内容
});
});
div class='order_list'
ul
li1/li
li2/li
/ul
/div
div class="order_xxk"
div class="yige"1/div
div class="erge"2/div
/div
