基于类显示元素

Question

我有这样的html

 <h2 class="Comprehensive Leadership">Comprehensive Leadership</h2><a href="/topic/comprehensiveleadership">View all Comprehensive Leadership Programs </a>
 <br><a href="/programs/pld/Pages/default.aspx" class="Comprehensive Leadership">Program for Leadership Development &gt;</a><br>Dec 2011–Jun 2012<br><a href="/programs/gmp/Pages/default.aspx" class="Comprehensive Leadership">General Management Program &gt;</a><br>Jan–May 2012<br>


<h2 class="Corporate Governance">Corporate Governance</h2><a href="/topic/corporategovernance">
View all Corporate Governance Programs </a><br><a href="/programs/ac/Pages/default.aspx" class="Corporate Governance">Audit Committees in a New Era of Governance &gt;</a><br>Nov 13–15, 2011<br><a href="/programs/cc/Pages/default.aspx" class="Corporate Governance">Compensation Committees &gt;</a><br>Nov 16–18, 2011<br>

<div class="tabbed-content"><ul class="tabs"><li><ul><li><a href="#" class="Comprehensive Leadership">Comprehensive Leadership</a></li><li><a href="#" class="Corporate Governance">Corporate Governance</a></li><div>

如果我点击综合领导，它应该只显示第一个h2标签，通过匹配类直到下一个h2标签，即：

<h2 class="Comprehensive Leadership">Comprehensive Leadership</h2><a href="/topic/comprehensiveleadership">View all Comprehensive Leadership Programs </a>
 <br><a href="/programs/pld/Pages/default.aspx" class="Comprehensive Leadership">Program for Leadership Development &gt;</a><br>Dec 2011–Jun 2012<br><a href="/programs/gmp/Pages/default.aspx" class="Comprehensive Leadership">General Management Program &gt;</a><br>Jan–May 2012<br>

我可以稍微修改一下html ...我还把它粘贴到了这里：http://jsfiddle.net/sMCsw/10/

Answer 1

更好的解决方案不是按类选择，而是按H2的实际值进行选择，使用如下代码：

function showByText(text){
    $("h2:contains('" + text + "')").show();
    // added a return false to prevent the a href from actually executing
    return false;
}
<a href="/programs/pld/Pages/default.aspx" onclick="return showByText(this.text();">Comprehensive Leadership</a>

Answer 2

你的html的结构方式并不容易解决这个问题。我认为，在不知道是否可以修改它的情况下，花时间尝试用您当前的html结构来解决它是不值得的。如果你可以修改它，那么这是一个非常简单的问题。

现在你的结构是这样的：

<h2>Topic</h2>
... a bunch of content....
<h2>Topic2</h2>
... a bunch of content....

您请求的链接将隐藏除所单击的主题之外的所有内容。但是你没有容器来定义你的内容。您需要包含您的内容块，以便您可以隐藏/显示它们。

<div class="mytopic">
<h2>Topic</h2>
   ... a bunch of content....
</div>
<div class="mytopic2">
<h2>Topic2</h2>
   ... a bunch of content....
</div>

然后，您可以构造一个jQuery构造函数来隐藏除所需内容之外的所有内容。正如评论中的一些人已经指出的那样-- Comprehensive Leadership类的使用方式是非法的。把它也修好。

$('div').not('.mytopic').hide();

在重读这篇文章时，我认为你实际上可能想要显示内容，而不是隐藏它。很难说，因为你发布的代码是不完整的，并且你没有提供CSS。无论如何，如果你想展示，那么这条jQuery代码行将会起作用。

$('div.mytopic').show();