I have a content wrapper which has several sections in it, each section with a different id. The sections can be accessed with a menu navigation which triggers a transform operation who uses translate3d to go between the sections, on horizontal, using an class named active to show which section should be displayed. I placed two anchors with absolute position towards the content wrapper, something like arrows in a slideshow one on the left and one on the right.
Here is how the code looks
<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>
the CSS
.left-arrow{ background: url('../img/left-arrow.png') left top no-repeat; height: 64px; width: 16px; display: block; position: absolute; top: 180px; left: 0; z-index: 10;}
.right-arrow{ background: url('../img/right-arrow.png') right top no-repeat; height: 64px; width: 16px; display: block; position: absolute; top: 180px; right: 0; z-index: 10;}
My problem is that I don't know how to hide the left arrow when the first section has the class active , and the right arrow when the last section has the class active . I tried with on and change but obviously I failed, I'm a rookie to jQuery element and event manipulation. Which selector should I use and which event? Can someone please give me some directions?
here is the jQuery part
(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
}
}
});
})
Would add a class to all the sections so you can add or remove and not have to focus on specific ID being first/last
<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();
});
EDIT: In haschange code shown, call setArrowState()
on line after .addClass("active").siblings().removeClass("active");
You just need to have a variable know which is the element selected, so you can remove the class, and then set on the click event to add the class.
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;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.