Javascript 当其他元素更改时显示/隐藏元素类-jQuery
我有一个内容包装器,里面有几个部分,每个部分都有不同的id。 可以通过菜单导航访问这些节,该导航触发一个转换操作,该操作使用translate3d在各节之间水平移动,使用名为active的类显示应显示的节。 我放置了两个绝对位置指向内容包装器的锚,就像幻灯片中的箭头一样,一个在左侧,一个在右侧 下面是代码的外观Javascript 当其他元素更改时显示/隐藏元素类-jQuery,javascript,jquery,Javascript,Jquery,我有一个内容包装器,里面有几个部分,每个部分都有不同的id。 可以通过菜单导航访问这些节,该导航触发一个转换操作,该操作使用translate3d在各节之间水平移动,使用名为active的类显示应显示的节。 我放置了两个绝对位置指向内容包装器的锚,就像幻灯片中的箭头一样,一个在左侧,一个在右侧 下面是代码的外观 <div id="wrapper"> <a class="left-arrow" href="#"></a>
<div id="wrapper">
<a class="left-arrow" href="#"></a>
<a class="right-arrow" href="#"></a>
<header>
<nav id="main">
<a class="active" href="#!/one">one</a>
<a href="#!/two">two</a>
<a href="#!/three">three</a>
<a href="#!/four">four</a>
</nav>
</header>
<div class="content_wrapper" style="display: block; transform: translate3d(0px, 0px, 0px);">
<section id="one" class="active">content one</section>
<section id="two">content two</section>
<section id="three">content three</section>
<section id="four">content four</section>
</div>
</div>
我的问题是,当第一节的类处于活动状态时,我不知道如何隐藏左箭头,当最后一节的类处于活动状态时,我不知道如何隐藏右箭头。我尝试了on和change但显然失败了,我是jQuery元素和事件操纵的新手。我应该使用哪个选择器和哪个事件?谁能给我指路吗
这里是jQuery部分
(function (e) {
var r = !1;
e(window).on("hashchange", function (i) {
var s = e("section#" + document.location.hash.replace("#!/", ""));
if (!r && !s.hasClass("active")) {
r = !0;
e('nav#main a[href="' + document.location.hash + '"]').addClass("active").siblings().removeClass("active");
e("section.active").animate({
scrollTop: 0
}, 300);
e("section.active").children("footer").children("div.box").hide();
s.addClass("active").siblings().removeClass("active");
if (Modernizr.csstransitions && Modernizr.csstransforms3d) e("div.content_wrapper").transition({
transform: "translate3d(-" + 1e3 * s.index() + "px, 0, 0)"
}, {
duration: 800,
easing: "cubic-bezier(0.770, 0.000, 0.175, 1.000)"
}, function () {
r = !1
});
else {
e("div.content_wrapper").animate({
left: "-" + 1e3 * s.index() + "px"
}, {
duration: 800,
queue: !0
});
r = !1
}
}
});
})
您只需要让一个变量知道哪个元素是选中的,这样您就可以删除该类,然后在单击事件上设置以添加该类
var menu1 = document.querySelector('#main1');
var menu2 = document.querySelector('#main2');
// etc
var selected = menu1;
var activeClass = function()
{
$(selected).removeClass('active');
$(this).addClass('active');
selected = this;
};
menu1.onclick = activeClass;
menu2.onclick = activeClass;
将向所有部分添加一个类,以便您可以添加或删除,而不必关注第一个/最后一个特定ID
<section id="one" class="content active">content one</section>
编辑:在显示的haschange代码中,在
.addClass(“活动”).sides().removeClass(“活动”)之后的第行调用setArrowState()
代码>javascript是否更改了类?还是只设置页面加载?如果是javascript,则显示该代码
<section id="one" class="content active">content one</section>
function setArrowState(){
var $content=$('.content');
$('.left-arrow')[ $content.first().is('.active') ? 'hide' :'show' ]();
$('.right-arrow')[ $content.last().is('.active') ? 'hide' :'show' ]();
}
$(function(){
/* set arrows on page load*/
setArrowState();
});