Question

我非常接近但只是看不到我在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
    });
});

Answer 1

如果您动态引入内容，则.click()将无效。这是因为尚未生成您尝试附加点击的元素。

你可以替换它：

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

有了这个：

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

如果不起作用：

jQuery(document).on('click', '.link a', function() {

Answer 2

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

假设您无法稍微更改标记，则可以执行以下操作一个 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
    });
});

Answer 3

使用基于锚名称或内容的其他唯一标识符的id生成内容。将每个链接上的数据内容设置为内容id的id。然后使用jquery通过在单击函数

中的链接上使用.data函数来获取内容

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();  
});

显示/隐藏基于锚点的内容 - 几乎就在那里

3 个答案: