我正在尝试创建一个菜单系统，切换/显示（很容易淡出或切换）元素的内容。因此用户无需更改页面。通常会使用ajax（.load）但不希望其他文件保存文本（由于cms）。
似乎无法让它发挥作用：
https://jsfiddle.net/feto4ymt/7/
更新
仍然打破主菜单系统，但嵌套在其中的这个二级菜单系统现在不会中断： https://jsfiddle.net/ph3ng2fo/35/
在滑动菜单系统之前，一个嵌套在另一个菜单系统中： https://jsfiddle.net/ph3ng2fo/34/
之前（每个菜单系统处于独奏操作模式，它们都能正常工作） 主要：http://jsfiddle.net/3to0neLm/1 嵌套在主要李：http://jsfiddle.net/feto4ymt/1
脚本
$(".tab_item2").click(function() {
$(".tab_item2").removeClass(".tab_item_color2");
$(this).addClass(".tab_item_color2");
$(".tabitem2").show(".slide_content2");
});
答案 0 :(得分：2)
您可以使用.eq()，.index()，.hide()
$(".tab_item2").click(function() {
$(".tab_item2").removeClass("tab_item_color2");
$(this).addClass("tab_item_color2");
// hide all `.tabslider2 li` elements,
// select, show `.tabslider2 li` element at current `.tab_item2` index
$(".tabslider2 li").hide().eq($(this).index(".tab_item2")).show();
});
答案 1 :(得分：1)
而不是.show使用.fadeTo这将为访客添加淡出动画271314答案：
$(".tab_item2").click(function() {
$(".tab_item2").removeClass("tab_item_color2");
$(this).addClass("tab_item_color2");
$(".tabslider2 li").hide().eq($(this).index(".tab_item2")).fadeTo("slow", 1, function() {
// Animation complete.
});
});.tabbed_content {
background-color: #000;
width: 100%;
overflow: hidden;
position: relative;
width: 100%;
height: 100%;
margin-left: 10px;
}
.tabs {
position: relative;
width: 70%;
float: left;
}
.tabs .moving_bg {
background-color: #000;
background-image: url(/images/arrow_down_blue.png);
position: absolute;
width: 600px;
z-index: 7;
left: 0;
padding-bottom: 19px;
background-position: left bottom;
background-repeat: no-repeat;
margin: 0 auto;
}
.tab_item {
display: block;
float: left;
width: 150px;
color: #bbb;
text-align: center;
z-index: 8;
position: relative;
cursor: pointer;
font-family: 'SourceSansPro-SemiBold';
font-size: 15px;
border-left: 1px solid #333;
padding: 8px 10px 8px 10px;
margin: 0 auto;
text-align: center;
}
.tab_item:hover {
color: #fff;
border-left: 1px solid #333;
}
.tab_item_color {
color: #fff;
}
.slide_content {
width: 1100px;
overflow: hidden;
margin: 26px 10px 0 5px;
}
.tabslider {
width: 6000px;
color: #222;
background: #fff;
}
.tabslider ul {
list-style: none;
width: 1100px;
}
.tabslider li
/*media adjust */
{
list-style: none;
float: left;
width: 1090px;
text-align: justify;
padding: 0 10px 0 0;
background-color: #fff;
color: #000;
}
.tabslider ul a {
color: #222;
text-decoration: none;
}
.tabslider ul a:hover {
color: #222;
}
.tabslider ul li {
padding-bottom: 7px;
}
.tabbed_content2 {
background-color: #fff;
width: 150px;
overflow: hidden;
position: relative;
height: 100%;
margin-left: 10px;
float: left;
}
.tabs2 {
position: relative;
width: 20%;
}
.tabs2 .moving_bg2 {
background-color: ;
background-image: url(/images/arrow_down_blue.png);
position: absolute;
width: 150px;
z-index: 7;
left: 0;
padding-bottom: 19px;
background-position: left bottom;
background-repeat: no-repeat;
margin: 0 auto;
}
.tab_item2 {
display: block;
float: left;
width: 150px;
color: #bbb;
text-align: center;
z-index: 8;
position: relative;
cursor: pointer;
font-family: 'SourceSansPro-SemiBold';
font-size: 15px;
padding: 8px 10px 8px 10px;
margin: 0 auto;
text-align: center;
}
.tab_item2:hover {
color: #333;
}
.tab_item_color2 {
color: #333;
}
.slide_content2 {
width: 910px;
overflow: hidden;
margin: 26px 10px 0 5px;
float: left;
}
.tabslider2 {
width: 6000px;
color: #222;
}
.tabslider2 ul {
list-style: none;
width: 910px;
}
.tabslider2 li
/*media adjust */
{
list-style: none;
float: left;
width: 900px;
text-align: justify;
padding: 0 10px 0 0;
background-color: #fff;
color: #000;
}
.tabslider2 ul a {
color: #222;
text-decoration: none;
}
.tabslider2 ul a:hover {
color: #222;
}
.tabslider2 ul li {
padding-bottom: 7px;
}
.bodymainMax {
width: 100%;
background: none;
overflow: visible;
clear: both;
margin: 0 auto;
padding: 0 0 0 0;
}
.bodymainMaxS {
width: 100%;
background: none;
overflow: visible;
clear: both;
margin: 0 auto;
padding: 0 0 0 0;
}
.bblock1 {
width: 100%;
background: #000;
clear: both;
}
.bblock3body {
width: 100%;
background: #ccc;
padding: 10px 0 10px 0;
clear: both;
}
.bblock1 {
width: 100%;
background: #000;
clear: both;
}
.bblock2 {
width: 100%;
background: #217DD1;
clear: both;
min-height: 3px;
}
.bblock3 {
width: 100%;
background: #ccc;
padding: 10px 0 10px 0;
clear: both;
}
.container {
width: 1130px;
margin: 0 auto;
vertical-align: middle;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bblock1">
<div class="container">
<div class="bodymainMaxS">
<div class='tabbed_content2'>
<div class='tabs2'>
<div class='moving_bg2'> </div>
<span class='tab_item2 tab_item_color2'>OVERVIEW</span>
<span class='tab_item2'>THE SCIENCE</span>
<span class='tab_item2'>ORDER</span>
<span class='tab_item2'>REPLACEMENT FILTERS</span>
</div>
</div>
<div class='slide_content2'>
<ul class='tabslider2'>
<li>11111111111111111111111111111111111111</li>
<li>2222222222222222222222222222222222222c</li>
<li>333333333333333333333333333333333333333333333</li>
<li>44444444444444444444444444444444444444</li>
</ul>
</div>
答案 2 :(得分：0)
这将解决您的问题。
$(".tab_item2").click(function() {
$(".tab_item2").removeClass("tab_item_color2");
$(this).addClass("tab_item_color2");
$(".tabslider2 li").hide();
$(".tabslider2 li:eq("+ ($(this).index() - 1) +")" ).show();
});
答案 3 :(得分：0)
<div class='tabs2'>
<div class='moving_bg2'> </div>
<span class='tab_item2 tab_item_color2' id="tab2_1">OVERVIEW</span>
<span class='tab_item2' id="tab2_2">THE SCIENCE</span>
<span class='tab_item2' id="tab2_3">ORDER</span>
<span class='tab_item2' id="tab2_4">REPLACEMENT FILTERS</span>
</div>
</div>
<div class='slide_content2'>
<ul class='tabslider2'>
<li class="tab2_1">11111111111111111111111111111111111111</li>
<li class="tab2_2">2222222222222222222222222222222222222c</li>
<li class="tab2_3">333333333333333333333333333333333333333333333</li>
<li class="tab2_4">44444444444444444444444444444444444444</li>
</ul>
</div>
<script>
$(".tab_item2").click(function() {
var custom_class = $(this).attr('id');
$('.tabslider2 li').hide();
$('.tabslider2 li.'+custom_class).show();
$(".tab_item2").removeClass("tab_item_color2");
$(this).addClass("tab_item_color2");
//$(".tabitem2").show("slide_content2");
});
</script>