我有这种div:
<div id="page-1"></div>
<div id="page-2"></div>
<div id="page-3"></div>
<div id="page-4"></div>
<div id="page-5"></div>
<div id="page-6"></div>
我想使用或显示或隐藏这些。 例如,
<a href="#" rel="page-1" class="active">1<a>
<a href="#" rel="page-2">2<a>
<a href="#" rel="page-3">3<a>
<a href="#" rel="page-4">4<a>
<a href="#" rel="page-5">5<a>
<a href="#" rel="page-6">6<a>
当page-1处于活动状态时,除了<div id="page-1"></div>
外,不显示所有div
谁能给我一些想法?
答案 0 :(得分:0)
在JS中你可以这样做:
<style>
div {display: none}
div.active {display: block;}
</style>
<div id="page-1" class="active">p1</div>
<div id="page-2">p2</div>
<div id="page-3">p3</div>
<div id="page-4">p4</div>
<div id="page-5">p5</div>
<div id="page-6">p6</div>
<a href="#" rel="page-1" class="active">1<a>
<a href="#" rel="page-2">2<a>
<a href="#" rel="page-3">3<a>
<a href="#" rel="page-4">4<a>
<a href="#" rel="page-5">5<a>
<a href="#" rel="page-6">6<a>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>
<script>
$('a').click(function() {
$('.active').removeClass('active');
$(this).addClass('active');
$('#' + $(this).attr('rel')).addClass('active');
return false;
});
</script>