JQuery基于单击显示/隐藏项

Question

我有一个网页在我的网站，将显示在一个地区内的所有公园默认。然后，我希望它只显示特定的项目，基于一个点击的区域，并隐藏所有其他的公园。

到目前为止，我有三个区域，例如区域-1，区域-2和区域-3-然后我希望它只显示这些区域内的公园，所以如果我点击区域的id -1，它只显示区域的类别-1，并隐藏所有其他区域，这对其他区域是一样的。

我最大的问题是，使这一工作，客户将能够增加更多的地区在未来，更多的公园，这些新的地区。

因此，我需要的是JQuery，以获取每个地区的id，将在未来将增加，并对他们与相关的公园。

<div id="side-bar" class="pull-left">
    <h2>Parks By Region</h2>
    <ul class="nav nav-pills nav-stacked">
        <li>
            <a href="#region-1">South East England</a>
        </li>
        <li>
            <a href="#region-2">South West England</a>
        </li>
        <li>
            <a href="#region-3">North Wales</a>
        </li>
    </ul>
</div>
<div id="content">
    <div id="contentWrapper">     

        <h1>REGION TEXT</h1>
        <div class="region-1 pull-left">Park 1</div>
        <div class="region-2 pull-left">Park 2</div>
        <div class="region-3 pull-left">Park 3</div>
    </div>
</div>

这是我的JSFiddle让你知道我在说什么.http://jsfiddle.net/y9CV9/

Answer 1

我建议您使用data-*，因为它对您来说更容易管理：

<div id="side-bar" class="pull-left">
    <h2>Parks By Region</h2>
        <ul class="nav nav-pills nav-stacked">
           <li>
                <a data-region="region-1" href="#region-1">South East England</a>
            </li>
            <li>
               <a data-region="region-2" href="#region-2">South West England</a>
            </li>
            <li>
                <a data-region="region-3" href="#region-3">North Wales</a>
            </li>
        </ul>
</div>

然后你可以使用：

$('#contentWrapper div').hide();
$('#side-bar a').click(function (e) {
    e.preventDefault();
    var region = $(this).attr('data-region');
    $('#contentWrapper div.' + region).show().siblings('div').hide();
});

小提琴演示

Answer 2

试一试

<div id="content">
    <div id="contentWrapper">     
        <h1>REGION TEXT</h1>
        <div id="region-1" class="region pull-left">Park 1</div>
        <div id="region-2" class="region pull-left">Park 2</div>
        <div id="region-3" class="region pull-left">Park 3</div>
    </div>
</div>

然后

jQuery(function($){
    var $regions = $('#contentWrapper .region').hide();
    $('#side-bar a').click(function(){
        var $target = $($(this).attr('href')).show();
        $regions.not($target).hide()
    })
})

演示：小提琴

Answer 3

首先，您必须首先隐藏您的所有部门，然后您可以更改它的属性点击。

jQuery(function($){
    var $regions = $('#contentWrapper .region').hide(); //Hide all div initially
    $('#side-bar a').click(function(){ //find the anchor tag
        var $target = $($(this).attr('href')).show(); //change the attribute of current div 
        $regions.not($target).hide()
    })
})

演示小提琴