Question

我有几个链接锚定到隐藏的div。通过将不透明度设置为零来隐藏这些div，并且一旦我点击它们各自的锚点，我就使用jQuery来显示这些div。

我想知道的是，只需将锚点放在网址中就可以使用jQuery打开这些div吗？例如：

<a href="#div1">Link1</a>
<a href="#div2">Link2</a>
<a href="#div3">Link3</a>

<div id="div1">Lorem Ipsum</div>
<div id="div2">Vestibulum in sollicitudin</div>
<div id="div3">Mauris auctor</div>

div最初是隐藏的，仅在单击锚点时出现。现在我如何通过在URL的末尾添加锚点来打开某个div，比如div2，onload，如http://example.com#div2

有可能吗？

Answer 1

您还可以使用toggle()

$('a').click(function(event){
   var href = $(this).attr('href').replace('#','');
   $(href).toggle();
   event.preventDefault();
});

更新：我认为上面的代码中存在错误。这是JSFiddle

中的工作演示

<强> jQuery的：

$('a').click(function (e) {
    var href = $(this).attr('href');
    $(href).toggle();
    e.preventDefault();
});

Answer 2

var links = document.getElementsByTagName('a');

function linkHandler(event){
    event.preventDefault();
    var div = document.getElementById(event.target.getAttribute('href').replace('#',''));
    if(div.style.display == 'none'){
        div.style.display = 'block';
    } else {
        div.style.display = 'none';
    }
}

for(var i=0;i<links.length;i++){
    links[i].addEventListener('click', linkHandler);
}

执行与anchor onload相关的脚本

2 个答案: