如何在jQuery Tabs UI中摺疊所有div以更改選項卡？

我使用了幾個WordPress循環和jQuery UI選項卡，這些選項卡導致下面的Main選項卡和條目內容div標記。 WordPress循環會在每個tab div中生成「入門帖」標記，但我不會顯示php，因爲每個tab div中生成的html標記是重要的部分。如何在jQuery Tabs UI中摺疊所有div以更改選項卡？

我還使用了一下的jQuery的獨立展開/摺疊每個條目內容的div：

$(".entry-content").hide(); 
$(".entry-title").click(function() { 
$(this).parent().children(".entry-content").slideToggle(500); });

我發現的是，每個條目內容的div保持其擴張狀態時，切換選項卡，即如果某些入口內容div在tabone中展開，我切換到tabtwo然後返回到tabone，它們仍然在tabone中展開。

我需要做的是在選項卡更改時摺疊選項卡中的所有入口內容div。下面是tab init和fx來更改選項卡。

我需要添加到這個函數來摺疊所有的入口內容div當一個標籤被更改？

$(document).ready(function(){ 
var $tabs= $("#tabs").tabs(); 
}); 
$(function() { 
$('#tabs').tabs({ 
fx: { opacity:'toggle' } 
}); 
});

主要選項卡和入門內容DIV標記：

<div id="tabs"> 
    <ul> 
    <li><a href="#tabone">tabone</a></li> 
    <li><a href="#tabtwo">tabtwo</a></li> 
    <li><a href="#tabthree">tabthree</a></li> 
    </ul> 

    <div id="tabone"> 

<div class="entry-post"> 
<h1 class="entry-title">Title</h1> 
<div class="entry-content">Lorem ipsum... 
</div></div> 

<div class="entry-post"> 
<h1 class="entry-title">Title</h1> 
<div class="entry-content">Lorem ipsum... 
</div></div> 

<div class="entry-post"> 
<h1 class="entry-title">Title</h1> 
<div class="entry-content">Lorem ipsum... 
</div></div> 
    </div> 

    <div id="tabtwo"> 

<div class="entry-post"> 
<h1 class="entry-title">Title</h1> 
<div class="entry-content">Lorem ipsum... 
</div></div> 

<div class="entry-post"> 
<h1 class="entry-title">Title</h1> 
<div class="entry-content">Lorem ipsum... 
</div></div> 

<div class="entry-post"> 
<h1 class="entry-title">Title</h1> 
<div class="entry-content">Lorem ipsum... 
</div></div> 
    </div> 

    <div id="tabthree"> 

.... 

</div></div>

來源

2011-04-05 markratledge

下面的代碼應該崩潰，每當一個新的選項卡中選擇所有.entry-content的div：

$(document).ready(function() { 
    var $tabs= $("#tabs").tabs({ 
     fx : { 
      opacity: 'toggle' 
     }, 
     select : function(event, ui) { 
      $(".entry-content").hide();     
     } 
    }); 
});

來源

2011-04-14 14:26:42 tobias86

完美的作品！謝謝。好的行動崩潰divs，然後直接進入選項卡更改fx。我仍然在學習jQuery，但我可以看到一些如何工作。 – markratledge 2011-04-14 16:25:01

我很高興它有幫助。我對jQuery也比較陌生，但是一旦你掌握了它，所有的事情都只是「點擊」:) – tobias86 2011-04-15 06:17:01

$("div.post [name^="entry-title"]").hide();

應該做下一個連接到您的FX，當你想要什麼。

或：

$("#tabs a").click(function() { 
    $("div.post [name^="entry-title"]").hide(); 
});

來源

2011-04-11 20:41:16 nullvariable

看起來它應該工作;這將如何被整合到上面的一個函數中？（代碼簡化如上） – markratledge 2011-04-12 14:54:45

$（function（）{（'＃tabs'）。tabs（{div.post [name^=「entry-title」]「）。hide（）; fx：{opacity：'toggle'} }）; }）;' – nullvariable 2011-04-12 16:56:56

其實@設計師的回答是正確的。 – nullvariable 2011-04-12 17:00:41

我不知道我知道你是完全的問題。但是，如果你wan't檢查標籤是否被觸發與否，嘗試使用此：

$(".selector").tabs({ 
    show: function(event, ui) { ... } 
});

簡化你如何能摺疊所有的div類「入門後」，每當選項卡顯示：

$(document).ready(function(){ 
    var $tabs = $("#tabs").tabs({ 
    show: function(){ 
     $('.entry-post').hide(); 
    } 
    }); 
});

來源

2011-04-12 10:59:54 Jafu

我簡化了上面的代碼;這將如何集成到上面的一個選項卡函數中，以更改選項卡？ – markratledge 2011-04-12 14:55:23

現在看到我的答案，我寫了一個快速示例。認爲可以做這項工作，但是我仍然不確定爲什麼你需要這個。 – Jafu 2011-04-12 15:20:20

這個例子殺死了所有的入口內容div，並沒有顯示出來。我想要做的是在選項卡上更改該選項卡中的所有div，而不是隱藏它們。 – markratledge 2011-04-12 18:11:07

我不是jQuery專家，所以這裏是直接的javascript。至少可以幫助解決問題...
由於你不在乎div是在哪個標籤上（因爲當標籤被改變時所有的div都應該被隱藏），所以你可以簡單地隱藏每個頁面上的所有div被改變了，不管它在哪個標籤上。

var divList = document.getElementsByClassName("entry-content"); 
for(var divitem in divList){ 
    divitem.style.display = "none"; 
}

我希望我的jQuery的是更強的，所以我可以在給它，但它可以幫助...

編輯：只要看看你的示例代碼，我想在jQuery的是這樣的：

$("#tabs a").click(function() { $(".entry-content").hide(); });

某些在單擊任何選項卡時會關閉所有入口內容類的div的東西。

來源

2011-04-13 21:10:27 AndyD273

你可能想利用現有的jQuery UI標籤庫，這將解決你的很多問題。

http://jqueryui.com/demos/tabs/

使用，這將讓你讓你列表項和他們控制的div之間更好的關聯。在您的標題中添加參考文件

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>

或下載它並刪除您不需要的內容。以下添加到您的CSS

.ui-tabs .ui-tabs-hide { 
    display: none !important; 
}

，改變你的引用，以便它們與jQueryUI的規格保持

<div id="tabs"> 
<ul> 
    <li><a href="#tabs-1">tabone</a></li>

，然後div編號匹配

<div id="tabs-1"> 
    <div class="entry-post">

這應該使該協會。然後，您可以添加控制行爲，所以應該讀

$(document).ready(function(){ 

    $(function() { 
      $('#tabs').tabs(); 
     });

，這將廢除需要存儲的div的陣列

然後你可以綁定到tabselect事件，這將隱藏的功能div的要摺疊

$('#tabs').bind('tabsselect', function(event, ui) { 
      $('#tabs').children().not(ui.panel).children().children(".entry-content").hide(); 
     });

你的代碼應該然後閱讀：

<head> 
<title>Collapse Divs</title> 
<style type="text/css"> 

    .ui-tabs .ui-tabs-hide { 
     display: none !important; 
    } 

</style> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 

    $(function() { 
      $('#tabs').tabs(); 
     }); 

     $('#tabs').bind('tabsselect', function(event, ui) { 
      $('#tabs').children().not(ui.panel).children().children(".entry-content").hide(); 
     }); 

     $(".entry-content").hide(); 

     $(".entry-title").click(function() { 
      $(this).parent().children(".entry-content").slideToggle(500); 
      }); 

}); 
</script> 
</head> 
<body> 
    <div id="tabs"> 
    <ul> 
    <li><a href="#tabs-1">tabone</a></li> 
    <li><a href="#tabs-2">tabtwo</a></li> 
    <li><a href="#tabs-3">tabthree</a></li> 
    </ul> 

<div id="tabs-1"> 
    <div class="entry-post"> 
... 
    <h1 class="entry-title">Title 3.3</h1> 
     <div class="entry-content">Lorem ipsum...</div> 
    </div> 
</div> 

</body>

來源

2011-04-14 13:16:22 GrahamJRoy

我已經在使用Tabs UI，庫和CSS。這看起來很不錯，但它在擴展後立即崩潰了，而不是等待標籤更改，即divs反彈開啓和關閉。 – markratledge 2011-04-14 16:23:19

真的嗎？它不應該這樣做。我已經在Firefox，Chrome和Safari上測試過它。輸入標題的點擊應該只是調用那些點擊監聽器並切換。 tabselect中的.not（ui.panel）引用也意味着您可以單擊活動選項卡，並且它不應該影響div。你使用的是什麼瀏覽器？ – GrahamJRoy 2011-04-14 17:18:58

如何在jQuery Tabs UI中摺疊所有div以更改選項卡？

回答

相關問題