隱藏/顯示多個DIV類別切換| WP/Jquery

我拖網站，並沒有找到解決方案，因此將不勝感激指導與以下內容：隱藏/顯示多個DIV類別切換| WP/Jquery

我顯示一個頁面上的WordPress的帖子摘錄列表，每個在它自己的DIV。我將post標籤輸出到DIV類中。

我想要實現的是基於DIV類的自定義過濾器。在最初打開頁面時，顯示所有的DIV。然後僅點擊所需類的DIV仍然可見。由於大多數DIVS在其課程中包含多個WP標籤，因此稍微複雜一些。

的HTML的一個例子是：

<a href="[command to show all DIVS]">All</a> 
<a href="[command to show only class 'apple']">Apples</a> 
<a href="[command to show only class 'mango']">Bananas</a> 
<a href="[command to show only class 'orange']">Oranges</a> 

<div class="apple orange"> 
<h3>Post 1 Title:</h3> 
<p>Post excerpt</p> 

<div class="apple"> 
<h3>Post 1 Title:</h3> 
<p>Post excerpt</p> 

<div class="mango orange"> 
<h3>Post 1 Title:</h3> 
<p>Post excerpt</p>

等

可以這樣用jQuery做？

來源

2013-05-28 True Voyage

是的，這可以用jQuery來實現。

嘗試做這樣的事情 -

<a href="javascript:$('.tag').show();return false;">All</a><!-- Show all tag class --> 
<a href="javascript:$('.tag').hide(); $('.apple').show();return false;">Apples</a><!-- Hide all tag class then show only apple class --> 
<a href="javascript:$('.tag').hide(); $('.mango').show();return false;">Mango</a><!-- Hide all tag class then show only mango class --> 
<a href="javascript:$('.tag').hide(); $('.orange').show();return false;">Oranges</a><!-- Hide all tag class then show only orange class --> 

<div class="tag apple orange"><!-- Add tag class --> 
    <h3>Post 1 Title:</h3> 
    <p>Post excerpt</p> 
</div> 

<div class="tag apple"><!-- Add tag class --> 
    <h3>Post 1 Title:</h3> 
    <p>Post excerpt</p> 
</div> 

<div class="tag mango orange"><!-- Add tag class --> 
    <h3>Post 1 Title:</h3> 
    <p>Post excerpt</p> 
</div>

是的，你將需要jQuery來做到這一點。

來源

2013-05-28 06:36:47 Gautham

謝謝 - 這種方法似乎工作。然而，我似乎錯過了一些東西... Onclick我的DIVs按需要過濾，但我然後立即轉移到一個空白頁面，只說：[object Object] （帶有一個奇怪的url） –

請參閱更新後的代碼。將'return false;'添加到href以避免被帶到空白頁面。 – Gautham

我已經按照建議添加了代碼，但現在鏈接不會執行任何操作。 –

下面是一個例子 -

HTML

<ul> 
    <li><a href="javascript:void(0)" rel="all">All</a></li> 
    <li><a href="javascript:void(0)" rel="apple">Apple</a></li> 
    <li><a href="javascript:void(0)" rel="mango">Mango</a></li> 
    <li><a href="javascript:void(0)" rel="orange">Orange</a></li> 
</ul> 


<div class="grids"> 

    <div class="grid apple">apple</div> 
    <div class="grid apple">apple</div> 
    <div class="grid mango">mango</div> 
    <div class="grid mango">mango</div> 
    <div class="grid orange">orange</div> 
    <div class="grid orange">orange</div> 
    <div class="grid orange">orange</div> 

</div>

和jQuery

$('document').ready(function(){ 

    $('ul li a').click(function(){ 
     var data = $(this).attr('rel'); 
     if(data == 'all'){ 
      $('.grids .grid').show(); 
     } 
     else { 
      $('.grids .grid').hide(); 
      $('.grids .grid.'+data).show(); 
     } 
     return false; 
    }); 

});

看到現場演示 - http://jsfiddle.net/5kk3K/

希望這將幫助你:)

來源

2013-05-28 06:47:40 HADI

隱藏/顯示多個DIV類別切換| WP/Jquery

回答

相關問題