0

我非常接近，但只是看不到jQuery脚本中缺少的内容，只能根据单击的锚点显示正确的内容块，并希望最初向访问者显示来自锚点的第一个内容块。任何帮助表示赞赏。

我已经动态生成了一类锚链接.link

内容也是动态生成的，每个锚点（A、B、C...）的内容都包含ul在.test-full-list. 任何帮助表示赞赏。

生成的内容：

锚链接：

<span class="link"><a href="#A">A</a></span>
<span class="link"><a href="#B">B</a></span>

内容：

<div class="test-listing-container">
    <ul class="test-full-list">
        <ul class="test-category-list"> 
            <a name="A"></a>
            <div class="anchor-header">- A -</div>
            <li id=test-list> 
                <a href="some link" class="main" title="some title">Some Link 1</a>
                <a href="some link" class="main" title="some title">Some Link 1</a>
            </li>
        </ul>
    </ul>
</div>

脚本：

jQuery(document).ready(function () {
    jQuery('.test-listing-container').hide();

    jQuery('.link a').click(function () {
        var jQuerydiv = jQuery('.test-full-list').eq(jQuery(this).index('.link a'));
        jQuerydiv.show('.test-full-list'); // show the relevant div
    });
});
4

3 回答 3

2

如果您要动态引入内容，您.click()将无法正常工作。这是因为您尝试将点击附加到的元素尚未生成。

你可以替换这个：

jQuery('.link a').click(function() {

有了这个：

jQuery('.test-listing-container').on('click', '.link a', function() {

如果这不起作用：

jQuery(document).on('click', '.link a', function() {
于 2013-07-25T17:58:23.923 回答
1

编辑：添加一个小提琴来演示代码：http: //jsfiddle.net/Fm6bR/1/

假设您不能稍微更改标记，您可以执行以下操作 A B

<div class="test-listing-container">
    <ul class="test-full-list">
      <ul class="test-category-list">
        <a name="A"></a>
        <div class="anchor-header">- A -</div>
           <li id=test-list>
           <a href="some link" class="main" title="some title">Some Link 1</a>
           <a href="some link" class="main" title="some title">Some Link 1</a>
           </li>
      </ul>
    </ul>
</div>


jQuery(document).ready(function(){
    jQuery('ul.test-category-list').hide();
    jQuery('ul.test-category-list').first().show(); //show the first one by default

    jQuery(document).on('click', '.link a', function (evt) {
        var $a = jQuery(evt.currentTarget),
            name = $a.attr('href').substr(1),
            $a2 = jQuery('.test-listing-container').find('a[name="' + name + '"]'),
            $ul = $a2.parents('ul.test-category-list').first();

        jQuery('ul.test-category-list').hide(); // hide all 
        $ul.show(); // show the relevant one
    });
});
于 2013-07-25T18:07:49.420 回答
0

根据内容的锚名称或其他一些唯一标识符生成带有 id 的内容。将每个链接上的 data-content 设置为内容 id 的 id。.data然后使用jquery通过在click函数中的链接上使用函数来获取内容

HTML

<span class="link"><a href="#fulllistA" data-content="fulllistA">A</a></span>
<span class="link"><a href="#fulllistB" data-content="fulllistB">B</a></span>
<div class="test-listing-container">
   <ul class="test-full-list" id="fulllistA">
     <ul class="test-category-list">
          <li id=test-list>
          <a href="some link" class="main" title="some title">Some Link 1</a>
          <a href="some link" class="main" title="some title">Some Link 1</a>
          </li>
     </ul>
   </ul>
</div>

Javascript

jQuery(document).on("click",".link a",function(e){
   e.preventDefault();
   e.stopPropagation();
   var content = jQuery("#"+jQuery(this).data("content"));
   jQuery(".test-listing-container > ul").not(content).hide(); // hide the others.
   content.show();  
});
于 2013-07-25T18:04:19.370 回答