Content is displayed with the previous and next buttons, but can it be possible to show the contents of the box directly with the link?
For example:
so can the second box be shown to the content?
$(document).ready(function() {
$('#next').click(function() {
if ($('.active').next('.case').length) {
$('.active').removeClass('active')
.next('.case')
.addClass('active');
}
});
$('#prev').click(function() {
if ($('.active').prev('.case').length) {
$('.active').removeClass('active')
.prev('.case')
.addClass('active');
}
});
});.case {
display: none
}
.active {
background: yellow;
border: 1px solid;
display: block
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="next"><h1>next</h1></div><div id="prev"><h1>prev</h1></div><div id="box1" class="case active">content 1</div><div id="box2" class="case">content 2</div><div id="box3" class="case">content 3</div>What have I done?
if($(location).attr('hash') != null) {
document.getElementById('box' + $(location).attr('hash').replace("#", "")).style.display = 'block';
}
but it didn't work
Update 1
I changed:
if($(location).attr('hash') != null) {
document.getElementById('box' + $(location).attr('hash').replace("#/", "")).style.display = 'block';
document.getElementById('box' + $(location).attr('hash').replace("#/", "")).addClass('active');
}
result, it didn't work
If possible, can you guide me?