0

このマークアップを含むページにいくつかのタブがあります

<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;
});

ありがとう、

サチン

4

2 に答える 2

1

概要以外のすべてに共通のCSS クラス (たとえば) を割り当て、jQuery クラス セレクターを使用してそれらをすべて非表示にすることができます。例えば：tabli 

<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();
于 2012-09-14T16:37:29.890 に答える
1

タブを扱う場合、特に設定 (href属性に関連する div の ID がある場合) では、何もハードコーディングしたり、title属性を使用したり、追加のクラスを使用したりする必要はありません。これを見てください：

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

すべてのタブの詳細 div を見つけてすべて非表示にし、クリックされたものに関連するものだけを表示します。

リンクに正しいhref属性を設定し、対応する div にそれらの ID を設定している限り、いつでも追加/削除するタブの数に関係なく機能します。

于 2012-09-14T17:03:50.193 に答える