通过按钮或其他html标记显示或隐藏特殊div

Question

我有这样的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>

我想使用或显示或隐藏这些s。例如，

<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。有人能给我一些建议吗？

Answer 1

在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>

https://jsfiddle.net/uo3vj66s/