我有一个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小提示给我看,并解释一下他们做了什么,那就太棒了
提前致谢