jquery选项卡（jquery 选项卡 左边和上边都可以切换，求大神帮助！）

本文目录

• jquery 选项卡 左边和上边都可以切换，求大神帮助！
• 基于jquery实现最简单的选项卡切换效果
• jquery选项卡，加了一个定时器之后就出问题了，求大神看下
• jQuery​选项卡的问题 点击打开所有选项卡
• 请问一个jQuery选项卡怎么写啊
• 有一段jquery代码，实现了选项卡式切换，但如何实现自动切换
• jQuery的选项卡，为什么只能执行一次
• 怎么写公用的jquery tab选项卡切换
• jquery选项卡当中有显示全部
• jquery tabs选项卡的局部刷新问题！

jquery 选项卡 左边和上边都可以切换，求大神帮助！

《!DOCTYPE》《html》《head》***隐藏网址***《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》$ (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"》《li》《span class="date"》02-16《/span》《a href="/1502/288021391312.html" title="教练进场Ban选！比赛更精彩 观众受益"》《font color=""》教练进场Ban选！比赛更精彩观众受益《/font》 《/a》《/li》《li》《span class="date"》02-16《/span》《a href="/1502/288009340360.html" title="人家女友：国外女玩家为锐雯重铸断剑"》《font color=""》人家女友：国外女玩家为锐雯重铸断剑《/font》《/a》《/li》《li》《span class="date"》02-16《/span》《a href="/1502/288007089075.html" title="福利COS：香港正妹Bell全方位展示胸器"》《font color=""》福利COS：香港正妹Bell全方位展示胸器《/font》《/a》《/li》《li》《span class="date"》02-16《/span》《a href="/1502/288010819654.html" title="日本LJL获外卡赛资格 季中赛或将参赛"》《font color=""》日本LJL获外卡赛资格季中赛或将参赛《/font》 《/a》《/li》《li》《span class="date"》02-16《/span》《a href="/1502/288008186913.html" title="网友盘点：最让人恶心的五大偷塔英雄"》《font color=""》网友盘点：最让人恶心的五大偷塔英雄《/font》《/a》《/li》《/ul》《/div》《div class="imgshow"》《ul class="mod-art"》《li》《span class="date"》02-16《/span》《a href="/1502/288007138257.html" title="安妮情人节限定半价 其余三款正热销中"》《font color=""》安妮情人节限定半价其余三款正热销中《/font》 《/a》《/li》《li》《span class="date"》02-16《/span》《a href="/1502/287982376070.html" title="每周之星：大树好辅助Imp男枪打爆全场"》《font color=""》每周之星：大树好辅助Imp男枪打爆全场《/font》《/a》《/li》《li》《span class="date"》02-16《/span》《a href="/1502/288025318751.html" title="2015LCS北美赛区春季赛：CLG VS TSM"》《font color=""》2015LCS北美赛区春季赛：CLGVS TSM《/font》 《/a》《/li》《li》《span class="date"》02-16《/span》《a href="/1502/288023188668.html" title="杰克：牛头努努大战三百回合 竟无一伤亡"》《font color=""》杰克：牛头努努大战三百回合竟无一伤亡《/font》 《/a》《/li》《li》《span class="date"》02-16《/span》《a 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》《li》5555《/li》《/ul》《/div》《div id="part-tab-con"》《div class="imgshow"》《ul class="mod-art"》《li》《span class="date"》02-16《/span》《a href="/1502/288022168482.html" title="LPL第五周掠影：年关将近队员喜庆服饰"》《font color=""》LPL第五周掠影：年关将近队员喜庆服饰《/font》《/a》《/li》《li》《span class="date"》02-16《/span》《a href="/1502/288021294370.html" title="黑子解说：吓老子一跳 上单船长怒吼凯瑞"》《font color=""》黑子解说：吓老子一跳上单船长怒吼凯瑞《/font》 《/a》《/li》《li》《span class="date"》02-16《/span》《a href="/1502/288020471263.html" title="Dopa盲僧我不是标题党 我是国服rank第一"》《font color=""》Dopa盲僧我不是标题党我是国服rank第一《/font》 《/a》《/li》《li》《span class="date"》02-16《/span》《a href="/1502/288020025966.html" title="ADC新年特别版：各种极限走砍 看完湿了"》《font color=""》ADC新年特别版：各种极限走砍看完湿了《/font》 《/a》《/li》《li》《span class="date"》02-16《/span》《a href="/1502/288013215453.html" title="囧镜头：武器死里逃生却惨遭提莫暗算"》《font color=""》囧镜头：武器死里逃生却惨遭提莫暗算《/font》《/a》《/li》《/ul》《/div》《div class="imgshow"》《ul class="mod-art"》《li》《span class="date"》02-16《/span》《a href="/1502/288013050053.html" title="精彩瞬间：智商碾压 卡萨丁无敌草丛战"》《font color=""》精彩瞬间：智商碾压卡萨丁无敌草丛战《/font》 《/a》《/li》《li》《span class="date"》02-16《/span》《a href="/1502/288011180111.html" title="国民好辅助：上分神器锤石 我来助你超神"》《font color=""》国民好辅助：上分神器锤石我来助你超神《/font》 《/a》《/li》《li》《span class="date"》02-16《/span》《a href="/1502/288010246239.html" title="COS娱乐解说：机器人布里茨 超神辅助C"》《font color=""》COS娱乐解说：机器人布里茨超神辅助C《/font》 《/a》《/li》《li》《span class="date"》02-16《/span》《a href="/1502/288009730710.html" title="JJ辰解说：教你剑姬抗压 让你两头又如何"》《font color=""》JJ辰解说：教你剑姬抗压让你两头又如何《/font》 《/a》《/li》《li》《span class="date"》02-16《/span》《a 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"》《li》《span class="date"》02-16《/span》《a href="/1502/288021391312.html" title="教练进场Ban选！比赛更精彩 观众受益"》《font color=""》教练进场Ban选！比赛更精彩观众受益《/font》 《/a》《/li》《li》《span class="date"》02-16《/span》《a href="/1502/288009340360.html" title="人家女友：国外女玩家为锐雯重铸断剑"》《font color=""》人家女友：国外女玩家为锐雯重铸断剑《/font》《/a》《/li》《li》《span class="date"》02-16《/span》《a href="/1502/288007089075.html" title="福利COS：香港正妹Bell全方位展示胸器"》《font color=""》福利COS：香港正妹Bell全方位展示胸器《/font》《/a》《/li》《li》《span class="date"》02-16《/span》《a href="/1502/288010819654.html" title="日本LJL获外卡赛资格 季中赛或将参赛"》《font color=""》日本LJL获外卡赛资格季中赛或将参赛《/font》 《/a》《/li》《li》《span class="date"》02-16《/span》《a href="/1502/288008186913.html" title="网友盘点：最让人恶心的五大偷塔英雄"》《font color=""》网友盘点：最让人恶心的五大偷塔英雄《/font》《/a》《/li》《/ul》《/div》《div class="imgshow"》《ul class="mod-art"》《li》《span class="date"》02-16《/span》《a href="/1502/288008554915.html" title="猫儿解说：青铜爬坑系列 德玛西亚皇子"》《font color=""》猫儿解说：青铜爬坑系列德玛西亚皇子《/font》 《/a》《/li》《li》《span class="date"》02-16《/span》《a href="/1502/288008064553.html" title="精彩集锦TOP5：杀戮锐雯万军丛中豪取4杀"》《font color=""》精彩集锦TOP5：杀戮锐雯万军丛中豪取4杀《/font》《/a》《/li》《li》《span class="date"》02-16《/span》《a href="/1502/288007684920.html" title="原凉教研室：套子VS突脸 莫甘娜专治突脸"》《font color=""》原凉教研室：套子VS突脸莫甘娜专治突脸《/font》 《/a》《/li》《li》《span class="date"》02-16《/span》《a href="/1502/288006698807.html" title="土豆怪兽TOP5：原来蛮王的E可以砍死队友"》《font color=""》土豆怪兽TOP5：原来蛮王的E可以砍死队友《/font》《/a》《/li》《li》《span class="date"》02-16《/span》《a href="/1502/288006443654.html" title="大神去哪儿：国服阿卡利14血 1V3秀翻天"》《font color=""》大神去哪儿：国服阿卡利14血1V3秀翻天《/font》 《/a》《/li》《/ul》《/div》《/div》《/div》《/div》《/body》《/html》

基于jquery实现最简单的选项卡切换效果

这个功能在现在的网站中使用较为普遍，就是以选项卡的形式来对一些内容做了分类。，比如下面的天猫商城。下面的源码是仿照天猫写的一个选项卡，实现起来的效果如下。主要是利用我们在点击相应板块是触发它的单击事件，在单击事件中再对内容显示框(tabbox)进行相应项的显示和隐藏操作。同时利用hover为其添加了鼠标滑过时的效果。代码：《!DOCTYPEhtml》《htmllang="en"***隐藏网址***《head》《metacharset="utf-8"/》《linkhref="css/style1.css"rel="stylesheet"type="text/css"/》《scriptsrc="jquery-1.3.2.min.js"》《/script》《title》《/title》《script》$(function(){var$div_li=$("div.tab_menuulli");$div_li.click(function(){//定义了tan_menu对应的单击事件，也就是类别的单击事件。$(this).addClass("selected").siblings().removeClass("selected");varindex=$div_li.index(this);$("div.tab_box》div").eq(index).show().siblings().hide();}).hover(function(){//定义了鼠标滑过特效$(this).addClass("hover");},function(){$(this).removeClass("hover");});});《/script》《/head》《body》《divclass="tab"》《divclass="tab_menu"》《ul》《liclass="selected"》时事《/li》《li》体育《/li》《li》娱乐《/li》《/ul》《/div》《divclass="tab_box"》《div》时事《/div》《divclass="hide"》体育《/div》《divclass="hide"》娱乐《/div》《/div》《/div》《/body》《/html》以上就是本文的全部内容，希望对大家熟练掌握实现选项卡切换的技巧有所帮助。

jquery选项卡，加了一个定时器之后就出问题了，求大神看下

   var self=this;var timeout =setTimeout(function(){    $ (self).addClass (’cru’).siblings ().removeClass (’cru’);   $(’.box_right ul:eq(’ + $ (self).index () + ’)’).show().siblings().hide();},320);$(this).mouseout(function(){ clearTimeout(timeout); });

造成不起作用的原因是你对this理解不对

jQuery​选项卡的问题 点击打开所有选项卡

《!DOCTYPE html》《html》  《head》***隐藏网址***《script class="jquery library" src="/js/sandbox/jquery/jquery-1.8.2.min.js" type="text/javascript"》《/script》《title》RunJS 演示代码《/title》《style》*{margin:0;padding:0;}.a{background-color:blue;width:130px;cursor:pointer;margin-bottom:20px;}.a:hover{background-color:red;}.wrap》div{float:left;width:100px;text-align:center;margin-right: 10px;background-color:gray;cursor:pointer;}.wrap》div:hover{background-color:#fd3;}ul{list-style:none;height:200px;display:none;}《/style》《script》jQuery(function($){var divs = $(".wrap》div").click(function(){var me = $(this);me.children("ul").slideToggle();});$(".a").click(function(){var uls = divs.children("ul");var len = uls.filter(":visible").length;if(len == uls.length){uls.slideUp();}else{uls.slideDown();}});});《/script》  《/head》《body》    《div class="a"》打开所有选项卡《/div》《div class="wrap"》《div》选项卡1《ul》《li》aaa《/li》《/ul》《/div》《div》选项卡2《ul》《li》bbb《/li》《/ul》《/div》《div》选项卡3《ul》《li》ccc《/li》《/ul》《/div》《/div》  《/body》《/html》

请问一个jQuery选项卡怎么写啊

首先如题，你的class必须是一 一对应的，就是说按钮是的class是tab1，那么与之对应的div里面也必须是tab1，如果不符合这点，以下jq代码不会生效，第二点，我给你的ul加了个id，方便选取元素。

html:

jq:

有一段jquery代码，实现了选项卡式切换，但如何实现自动切换

我有用过 不过你需要自己改改！我的是 tab 切换的 和你那个差不多！！！//expert_focus$(function(){$(’#expert_small li’).each(function(index){$(this).hover(function(){$(’#expert_small li.expert_small_focus’).removeClass(’expert_small_focus’);$(this).addClass(’expert_small_focus’);$(’#expert_focus li’).eq(index).show().siblings().hide();})})})

jQuery的选项卡，为什么只能执行一次

用代码模拟了楼主的实现效果，其时它并不是第二次执行就不可用了，而是对最初加了class="note_active"的选项不再操作。我用的Xhtml Code部分是这样的，和你的可能不一样，但原理是一样的。 Xhtml Code: 《ul》 《li class="note_wait"》内容部分《/li》 《li class="note_wait"》内容部分《/li》 《li class="note_wait"》内容部分《/li》 《li class="note_active"》内容部分《/li》 《/ul》jQuery Code:(为了简化说明问题，我只取用一部分存在问题的代码）$(".note_wait").mouseover(function(){$(".note_active").addClass("note_wait").removeClass("note_active");$(this).removeClass("note_wait").addClass("note_active"); });这样就可以看出来，问题所在（如前所说）。===========================可爱的分隔线============================其实，楼主想要的效果，无非就是一个变换样式的效果，为什么要这么复杂呢。修改一下，是不是更好一些：Xhtml Code:《ul id="ulid"》 《li》内容部分《/li》 《li》内容部分《/li》 《li》内容部分《/li》 《li class="note_active"》内容部分《/li》《/ul》jQuery Code:$("#ulid li").mouseover(function(){$(".note_active").removeClass("note_active");$(this).addClass("note_active"); });其中.note_wait的样式　可以通过 #ulid li{……}来定义。因为没有楼主的原码，只是举例分析下，供参考！

怎么写公用的jquery tab选项卡切换

代码《!DOCTYPE html》《html》《head》***隐藏网址******隐藏网址***《title》简单的tab效果《/title》《style type="text/css"》* { padding: 0px; margin:0px}body { text-align: center}.wrap ul { overflow: hidden}.wrap li { float: left; list-style: none; margin-right: 10px; cursor: pointer; padding: 2px 5px}.link { cursor: pointer; color: #F00}.wrap { width: 200px; margin: 50px auto}.wrap, .ellipsis { font-size: 12px; width: 200px;}.tab_div div { display: none; padding: 10px;}.tab_div { text-align: left; border: 1px #CCC solid; height: 200px; clear: both}.cur { background: #060; color: #FFF}#setTab_2{ margin-top: 20px;}《/style》《script type="text/javascript"》$(document).ready(function() { //tab $("#setTab").setTab(); $("#setTab_2").setTab();}); /*插件代码*/(function ($) { $.fn.setTab = function () { var getTab=$(this),//this指向调用函数的ID panels = getTab.children("div.tab_div").children("div"), tabs = getTab.find("li"); return this.each(function(){ $(tabs).click(function(e) { var index = $.inArray(this, $(this).parent().find("li"));//this指向li if (panels.eq(index)) { $(tabs).removeClass("cur"); $(this).addClass("cur"); panels.css("display", "none").eq(index).css("display", "block"); } }); }); }})(jQuery);《/script》《/head》《body class="wrap"》《div id="setTab"》 《ul class="tab_nav"》 《li class="cur"》国事《/li》 《li》军情《/li》 《li》图片《/li》 《/ul》 《div class="tab_div"》 《div style="display: block"》国事《/div》 《div》军情《/div》 《div》图片《/div》 《/div》《/div》《div id="setTab_2"》 《ul class="tab_nav"》 《li》国事《/li》 《li class="cur"》军情《/li》 《li》图片《/li》 《/ul》 《div class="tab_div"》 《div》国事《/div》 《div style="display: block"》军情《/div》 《div》图片《/div》 《/div》《/div》《/body》《/html》

jquery选项卡当中有显示全部

$(function(){ $(’li’).click(function(){ var index = $(this).index(); $(this).addClass("cur").siblings().removeClass(’cur’) $(’.content’).eq(index).show().addClass(’on’).siblings().removeClass(’on’).hide();});})我这里有一个选择卡，至于你说的，我表示没看懂

jquery tabs选项卡的局部刷新问题！

应该使用ajax 的 form提交方式。直接提交是不能实现的。***隐藏网址***