通过锚标签动态加载内容

时间:2015-10-21 11:39:11

标签: javascript jquery html

我有一个JS小提琴,我想做什么,它几乎就在那里。 https://jsfiddle.net/Fm6bR/1/

但我想要做的是在从电子邮件中点击URL时加载内容。

e.g。 www.mocksite.co.uk/#A将加载A中的内容      www.mocksite.co.uk/#B将加载B等内容。

当我在我的测试网站上运行时,我可以看到锚标签选择的选项只是不显示它下面的任何内容。

<span class="link"><a href="#A">A</a></span>
<span class="link"><a href="#B">B</a></span> 
<span class="link"><a href="#C">C</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">
       <a href="some link" class="main" title="some title">Some Link 1 - A</a>
       <a href="some link" class="main" title="some title">Some Link 1 - A</a>
       </li>
  </ul>
  <ul class="test-category-list">
    <a name="B"></a>
    <div class="anchor-header">- B -</div>
       <li id="test-list-B">
       <a href="some link" class="main" title="some title">Some Link 1 - B</a>
       <a href="some link" class="main" title="some title">Some Link 1 - B</a>
       </li>
  </ul>
     <ul class="test-category-list">
    <a name="C"></a>
    <div class="anchor-header">- C -</div>
       <li id="test-list-C">
       <a href="some link" class="main" title="some title">Some Link 1 - C</a>
       <a href="some link" class="main" title="some title">Some Link 1 - C</a>
       </li>
  </ul>
</ul>
</div>

<script>
   $.noConflict();

   jQuery(document).ready(function(){
     jQuery('ul.test-category-list').hide();

     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
     });
   });
</script>

以上是我迄今为止在JS小提琴中所做的事情。

理想情况下,我不会在HTML中的任何位置拥有3个链接,它们都将被隐藏,只需能够在点击页面时访问内容。

我对javascript很新,所以如果有人能用js小提示给我看,并解释一下他们做了什么,那就太棒了

提前致谢

0 个答案:

没有答案