【发布时间】：2023-04-06 11:14:01
【问题描述】：
我创建了一个滑动内容，你点击顶部的菜单和下面的内容滑动到下一个“li”。
在主菜单“替换过滤器”的最后一个链接中，还有另一个滑动内容。
似乎在主系统中驻留了第二个系统。
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();
感谢您的帮助
【问题讨论】：
-
检查你的小提琴，它似乎不适合我
-
是的，jQuerry 还没有被加载到那个小提琴中。加载它，它将开始为第一级元素工作。
-
你如何加载 jquery 有人可以更新它来工作吗？
-
@david，您的代码很好，但您没有在 jsfiddle 中加载 jquery 引用。所以只需改变小提琴并添加jquery。然后它会工作。
标签： javascript jquery