Question

我在页面上有几个带有此标记的标签

<div id="holiday-details-nav">
                <ul>
                    <li><a class="holidaydetails-description" title="Overview" href="#tab-holidaydetails-overview">Overview</a></li>
                    <li><a class="holidaydetails-included" title="Rooms" href="#tab-holidaydetails-rooms">Rooms</a></li>
                    <li><a class="holidaydetails-itinerary" title="Rates" href="#tab-holidaydetails-rates">Rates</a></li>  
                    <li><a class="holidaydetails-accommodation" title="Information" href="#tab-holidaydetails-information">Information</a></li>                         
                    <li><a class="holidaydetails-reviews" title="Reviews" href="#tab-holidaydetails-reviews">Reviews</a></li>
                </ul>
            </div>

隐藏和显示这些选项卡中的内容由一些从此开始的JQuery代码控制

$(document).ready(function () {
    // Hide all tabs apart from the overview
    $('#holiday-details-tabs div:#tab-holidaydetails-rooms').hide();
    $('#holiday-details-tabs div:#tab-holidaydetails-rates').hide();
    $('#holiday-details-tabs div:#tab-holidaydetails-information').hide();
    $('#holiday-details-tabs div:#tab-holidaydetails-reviews').hide();
    ...

问题是，如果我添加，删除或重命名标签（就像我刚刚完成的那样），那么我必须更改所有这些代码。我想要的是添加，重命名或删除任意多个选项卡，但不必修改此JQuery代码。

我并不是真的在寻找能为我编写解决方案的人，而是想开始讨论可以用来避免这种命名依赖的工具，技术等。

修改

点击标签时，我也有点丑陋。

$('#holiday-details-nav ul li a').click(function () {
    // Remove active class from all links
    $('#holiday-details-nav ul li').removeClass('active');
    //Set clicked link class to active
    $(this).parent().addClass('active');
    // Set variable currentTab to value of href attribute of clicked link
    var currentTab = $(this).attr('href');
    // Hide all tabs
    $('#holidaydetails-description-imagecontainer').hide();
    $('#holiday-details-tabs div:#tab-holidaydetails-overview').hide();
    $('#holiday-details-tabs div:#tab-holidaydetails-rooms').hide();
    $('#holiday-details-tabs div:#tab-holidaydetails-rates').hide();
    $('#holiday-details-tabs div:#tab-holidaydetails-information').hide();
    $('#holiday-details-tabs div:#tab-holidaydetails-reviews').hide();

    $('#holiday-details-bottom').show();
    $('#holiday-details-left-booknow').show();

    // Show div with id equal to variable currentTab
    $(currentTab).show();

    $('#holidaydetails-description-imagecontainer').show();

    return false;
});

谢谢，

萨钦

Answer 1

您可以为每个tab （概述除外）分配通用 CSS类，比如li，然后使用jQuery类选择器隐藏所有。例如：

<div id="holiday-details-nav">
  <ul>
    <li><a class="holidaydetails-description" title="Overview" href="#tab-holidaydetails-overview">Overview</a></li>
    <li><a class="tab holidaydetails-included" title="Rooms" href="#tab-holidaydetails-rooms">Rooms</a></li>
    <li><a class="tab holidaydetails-itinerary" title="Rates" href="#tab-holidaydetails-rates">Rates</a></li>  
    <li><a class="tab holidaydetails-accommodation" title="Information" href="#tab-holidaydetails-information">Information</a></li>                         
    <li><a class="tab holidaydetails-reviews" title="Reviews" href="#tab-holidaydetails-reviews">Reviews</a></li>
  </ul>
</div>

然后，隐藏除概述之外的所有选项卡：

$("holiday-details-nav .tab").hide();

或者反过来说，就是在概述中添加一个特定的类，并隐藏其他每个标签：

<div id="holiday-details-nav">
  <ul>
    <li><a class="overview holidaydetails-description" title="Overview" href="#tab-holidaydetails-overview">Overview</a></li>
    <li><a class="holidaydetails-included" title="Rooms" href="#tab-holidaydetails-rooms">Rooms</a></li>
    <li><a class="holidaydetails-itinerary" title="Rates" href="#tab-holidaydetails-rates">Rates</a></li>  
    <li><a class="holidaydetails-accommodation" title="Information" href="#tab-holidaydetails-information">Information</a></li>                         
    <li><a class="holidaydetails-reviews" title="Reviews" href="#tab-holidaydetails-reviews">Reviews</a></li>
  </ul>
</div>

然后，要隐藏，请选择所有标签，并使用.not()排除概述：

$("#holiday-details-nav a").not(".overview").hide();

Answer 2

在处理标签时，尤其是在您拥有的设置中（href属性具有与之相关的div的ID），您无需硬编码，使用title属性，或使用任何额外的类。看看这个：

http://jsfiddle.net/FAM2s/2/

所有这一切都找到了所有标签的详细信息div并将它们全部隐藏起来，然后只显示与刚刚点击的内容相关的那个。

只要您为链接设置了正确的href属性，并使用这些ID设置相应的div，它就会起作用，无论您在何时添加/删除多少个标签。

编码不佳的JQuery：命名依赖项

2 个答案: