在同一div內的類別和子類別之間切換

我有一個名爲container的父級div。在該div內是一個名爲togglelinks的主類別導航。這在名爲people的categories內的div類之間切換，每個類別約有5個例如people,business等。我只顯示下面的代碼people。在同一div內的類別和子類別之間切換

所以div class people是帶有ID的多個div。登陸之一將是people。在id爲「people」的div中，有多個鏈接到div ID people以外的div ID的鏈接。 business和highlife。因此，點擊id「people」中的鏈接時，它會隱藏ID people，並顯示ID business作爲示例。我會弄清楚其餘的結構，只是我正在努力的這一部分。

基本（簡體）結構如下：

<div class="people"> 
<div id="people"> 
    <ul> 

    <li> 
    <a href="#" data-toggle="#business"> 
    <span>Business</span> 
    <img src="<?php echo get_template_directory_uri(); ?>/images/business.jpg" alt="Category People" /> 
    </a> 
    </li> 

    <li> 
    <a href="#" data-toggle="#highlife"> 
    <span>Highlife</span> 
    <img src="<?php echo get_template_directory_uri(); ?>/images/highlife.jpg" alt="Category Highlife" /> 
    </a> 
    </li> 

    </ul> 
</div> 

<div id="business"> 
</div> 

<div id="highlife"> 
</div> 

</div>

下面是jQuery的我曾嘗試：

jQuery("a[data-toggle]").on("click", function(e) { 
    e.preventDefault(); // prevent navigating 
    var selector = jQuery(this).data("toggle"); // get corresponding element 
    jQuery("div").hide(); 
    jQuery(selector).show(); 
});

來源

2014-07-25 dreamsynk

讓我知道如果這是你想要做什麼。

小提琴導航通過人，商業和高生活時間顯示一節。

jsFiddle

jQuery("a[data-toggle]").on("click", function (e) { 
     e.preventDefault(); // prevent navigating 
     var target = $(this).data('toggle'); 
     $('.people > div').hide(); 
     $('.people ' + target).fadeIn(); 
    });

來源

2014-07-25 12:46:18 Stefan

謝謝，我需要的是什麼。 – dreamsynk

它應該在這個網站上工作：http://zero.rosewaterstudios.com/，但它不工作，沒有錯誤。只是不工作，我不是jQuery的專家。我不知道爲什麼它不工作。請給我一個機會給我看看。你的腳本很好，它正是我需要的。 – dreamsynk

只需快速瀏覽一下您的頁面。你的滑塊插件CSS可能會干擾，或者標記不正確。我會盡力在今天晚些時候看看，但不能承諾任何事情。 – Stefan

在同一div內的類別和子類別之間切換

回答

相關問題