Javascript 编码错误的JQuery:命名依赖项

我在一个页面上有几个标签有这个标记

<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代码

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

编辑

当点击标签时，我也有点难看

$('#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;
});

谢谢

Sachin

您可以为每个

li

分配一个公共CSS类，比如

tab

，除了overview，然后使用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>

或者反过来，也就是说，将特定类添加到overview，并隐藏每个其他选项卡：

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

---

在处理选项卡时，尤其是在您的设置中（其中

href

属性具有与其相关的div的id），您不需要硬编码任何内容，使用

title

属性或使用任何额外的类。看看这个：

它会找到所有选项卡的细节div并将其全部隐藏，然后只显示与刚刚单击的内容相关的内容

---

只要您为链接设置了正确的

href

属性，并使用这些id设置了相应的div，无论您随时添加/删除多少选项卡，它都会起作用。

但是单击我会有一些更难看的地方-请参见上面的编辑。为什么不使用标题标签进行选择，而不是添加更多的类？标题标签已经存在。不需要添加额外的类，这仍然是硬代码的东西，所以OP仍然必须更新代码，如果他们对标签列表进行任何更改。。。

$("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>

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