我创建了一个滑动内容，点击顶部的菜单，下面的内容滑动到下一个＆＃34; li＆＃34;。
在主菜单的最后一个链接中＆＃34;替换过滤器＆＃34;其中还有另一个滑动内容。
似乎因第二个系统驻留在主要系统而失效。
js小提琴：
https://jsfiddle.net/ph3ng2fo/30/
脚本：
var isTabSelected = false;
var lastSelectedTabLeftPos;
$(".tab_item").mouseover(function() {
var $this = $(this);
$this.parent().find(".moving_bg").stop().animate({
left: $this.position()['left']
}, { duration: 300 });
});
$( ".tab_item" ).mouseout(function() {
if(isTabSelected){
$(".moving_bg").stop().animate({
left: ""+lastSelectedTabLeftPos
}, { duration: 300 });
}else
{
$(".moving_bg").stop().animate({
left: "0"
}, { duration: 300 });
}
});
$(".tab_item").click(function() {
isTabSelected = true;
var $this = $(this);
lastSelectedTabLeftPos = $this.position()['left'];
});
//Slide Content
var TabbedContent = {
current: {i:null, obj:null},
init: function() {
$(".tab_item").click(function() {
$(".tab_item").removeClass("tab_item_color");
$(this).addClass("tab_item_color");
var $this = $(this);
TabbedContent.slideContent($this);
});
TabbedContent.current.i = 0;
TabbedContent.current.obj = $(".tabslider li").eq(0);
},
slideContent: function($obj) {
var $container = $obj.closest(".tabbed_content"),
$contentContainer = $('.bodymainMaxS'),
$tabslider = $contentContainer.find(".tabslider");
var i = $obj.index() - 1;
var $lis = $tabslider.find("li");
$new = $lis.eq(i);
if(i === TabbedContent.current.i) {
return;
}
$lis.hide().filter($new.add(TabbedContent.current.obj)).show();
var margin_1 = (i > TabbedContent.current.i) ? 0 : -$new.width();
var margin_2 = (i < TabbedContent.current.i) ? 0 : -$new.width();
$tabslider.stop().css({
marginLeft: margin_1 + "px"
}).animate({
marginLeft: margin_2 + "px"
}, 400);
TabbedContent.current.i = i;
TabbedContent.current.obj = $new;
}
}
TabbedContent.init();
var isTabSelected2 = false;
var lastSelectedTabLeftPos2;
$(".tab_item2").mouseover(function() {
var $this2 = $(this);
$this2.parent().find(".moving_bg2").stop().animate({
top: $this2.position()['top']
}, { duration: 300 });
});
$( ".tab_item2" ).mouseout(function() {
if(isTabSelected2){
$(".moving_bg2").stop().animate({
top: ""+lastSelectedTabLeftPos2
}, { duration: 300 });
}else
{
$(".moving_bg2").stop().animate({
top: "0"
}, { duration: 300 });
}
});
$(".tab_item2").click(function() {
isTabSelected2 = true;
var $this2 = $(this);
lastSelectedTabLeftPos2 = $this2.position()['top'];
});
var TabbedContent2 = {
current2: {i2:null, obj2:null},
init: function() {
$(".tab_item2").click(function() {
$(".tab_item2").removeClass("tab_item_color2");
$(this).addClass("tab_item_color2");
var $this2 = $(this);
TabbedContent2.slideContent2($this2);
});
TabbedContent2.current2.i2 = 0;
TabbedContent2.current2.obj2 = $(".tabslider2 li").eq(0);
},
slideContent2: function($obj2) {
var $container2 = $obj2.closest(".tabbed_content2"),
$contentContainer2 = $('.slide_content2'),
$tabslider2 = $contentContainer2.find(".tabslider2");
var i2 = $obj2.index() - 1;
var $lis2 = $tabslider2.find("li");
$new2 = $lis2.eq(i2);
if(i2 === TabbedContent2.current2.i2) {
return;
}
$lis2.hide().filter($new2.add(TabbedContent2.current2.obj2)).show();
var margin_1b = (i2 < TabbedContent2.current2.i2) ? 0 : -$new2.width();
var margin_2b = (i2 > TabbedContent2.current2.i2) ? 0 : -$new2.width();
$tabslider2.stop().css({
marginLeft: margin_1b + "px"
}).animate({
marginLeft: margin_2b + "px"
}, 400);
TabbedContent2.current2.i2 = i2;
TabbedContent2.current2.obj2 = $new2;
}
}
TabbedContent2.init();
感谢您的帮助
答案 0 :(得分：0)
您的代码存在的问题是滑动效果适用于具有类＆＃39; .tab_item＆＃39;，＆＃39; .tabslider＆＃39;的元素。和＆＃39; .tabbed_content＆＃39;
你的2级元素DON＆＃T; T有这些课程。相反，他们的班级名称有＆＃34; 2＆＃34;附在他们身上。例如，＆＃39; .tab_item 2 ＆＃39;，＆＃39; .tabslider 2 ＆＃39;和＆＃39; .tabbed_content 2 ＆＃39;
所以你需要： 1.通过删除＆＃34; 2＆＃34;来纠正2级元素的类名。从他们。但这也需要您对TabbedContent对象及其功能进行重大更改，因为现在您需要区分Level 1和＃34; tab_item＆＃34;的父级。和2级＆＃34; tab_item＆＃34;
下面的代码段使用第二种方法。
var isTabSelected = false;
var lastSelectedTabLeftPos;
//alert(0);
$(".tab_item").mouseover(function() {
var $this = $(this);
$this.parent().find(".moving_bg").stop().animate({
left: $this.position()['left']
}, { duration: 300 });
});
jQuery( ".tab_item" ).mouseout(function() {
if(isTabSelected){
$(".moving_bg").stop().animate({
left: ""+lastSelectedTabLeftPos
}, { duration: 300 });
}else
{
$(".moving_bg").stop().animate({
left: "0"
}, { duration: 300 });
}
});
$(".tab_item").click(function() {
isTabSelected = true;
var $this = $(this);
lastSelectedTabLeftPos = $this.position()['left'];
});
//Slide Content
var TabbedContent = {
current: {i:null, obj:null},
init: function() {
$(".tab_item").click(function() {
$(".tab_item").removeClass("tab_item_color");
$(this).addClass("tab_item_color");
var $this = $(this);
TabbedContent.slideContent($this);
});
TabbedContent.current.i = 0;
TabbedContent.current.obj = $(".tabslider li").eq(0);
},
slideContent: function($obj) {
var $container = $obj.closest(".tabbed_content"),
$contentContainer = $('.bodymainMaxS'),
$tabslider = $contentContainer.find(".tabslider");
var i = $obj.index() - 1;
var $lis = $tabslider.find("li");
$new = $lis.eq(i);
if(i === TabbedContent.current.i) {
return;
}
$lis.hide().filter($new.add(TabbedContent.current.obj)).show();
var margin_1 = (i > TabbedContent.current.i) ? 0 : -$new.width();
var margin_2 = (i < TabbedContent.current.i) ? 0 : -$new.width();
$tabslider.stop().css({
marginLeft: margin_1 + "px"
}).animate({
marginLeft: margin_2 + "px"
}, 400);
TabbedContent.current.i = i;
TabbedContent.current.obj = $new;
}
};
TabbedContent.init();
var TabbedContent2 = {
current: {i:null, obj:null},
init: function() {
$(".tab_item2").click(function() {
$(".tab_item2").removeClass("tab_item_color");
$(this).addClass("tab_item_color");
var $this = $(this);
TabbedContent2.slideContent($this);
});
TabbedContent2.current.i = 0;
TabbedContent2.current.obj = $(".tabslider2 li").eq(0);
},
slideContent: function($obj) {
var $container = $obj.closest(".tabbed_content2"),
$contentContainer = $('.bodymainMaxS'),
$tabslider = $contentContainer.find(".tabslider2");
var i = $obj.index() - 1;
var $lis = $tabslider.find("li");
$new = $lis.eq(i);
if(i === TabbedContent2.current.i) {
return;
}
$lis.hide().filter($new.add(TabbedContent2.current.obj)).show();
var margin_1 = (i > TabbedContent2.current.i) ? 0 : -$new.width();
var margin_2 = (i < TabbedContent2.current.i) ? 0 : -$new.width();
$tabslider.stop().css({
marginLeft: margin_1 + "px"
}).animate({
marginLeft: margin_2 + "px"
}, 400);
TabbedContent2.current.i = i;
TabbedContent2.current.obj = $new;
}
};
TabbedContent2.init();.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;
}
.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;
}
.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;
}
.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_content'>
<div class='tabs'>
<div class='moving_bg'> </div>
<span class='tab_item tab_item_color'>OVERVIEW</span>
<span class='tab_item'>THE SCIENCE</span>
<span class='tab_item'>ORDER</span>
<span class='tab_item'>REPLACEMENT FILTERS</span>
</div>
</div>
</div>
</div>
</div>
<div class="bblock3">
<div class="container">
<div class="bodymainMaxS">
<div class='slide_content'>
<ul class='tabslider'>
<!--1st SLIDE -->
<li>
yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
</li>
<!--2nd SLIDE -->
<li>
kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
</li>
<!--3rd SLIDE -->
<li>
uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu
</li>
<!--4th SLIDE -->
<li>
<div class='tabbed_content2'>
<div class='tabs'>
<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>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quisUt enimad minim veniam, quis nostrud exercitation ullamc</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprere magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamc</li>
<li>Lorem ipsum dolor sidunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamc</li>
<li>Lorem ipsum olore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamc</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>