如何在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以更改选项卡？

回答

相关问题