Question

我有以下链接：

<a href="#HDR" onClick="showGallery()">I</a>

这使用以下javascript：

function showGallery(){
    if(window.location.hash) {
      $('#gallery').fadeIn('fast');
      var hash = window.location.hash.substring(1);
      alert(hash);
    } else {

    }

}

所以它只显示画廊中的URL是一个标签。但是，当我点击链接时，没有任何反应。当我点击两次时，画廊会淡入。

所以链接首先生成javascript，我不起作用'因为URL中没有主题标签，之后，它执行href并在URL中插入Hashtag。我怎么能这样做？

我的目标：

当我点击链接时，它会打开一个图库。要知道我必须打开哪个库，我在URL中插入一个标签。在这里，我想显示HDR专辑。我还想要，如果我的网站使用标签获得opend，它应该显示图库。

还有另一种更简单或更清洁的方法吗？希望你明白我想要的东西。

Answer 1

对于现代浏览器，您可以将Javascript代码绑定到onhashchange事件。链接将没有Javascript：

<a href="#HDR">I</a>

只要哈希值发生变化，就会运行Javascript：

function locationHashChanged() {
    if (location.hash === "#HDR") {
        $('#gallery').fadeIn('fast');
    }
}

window.onhashchange = locationHashChanged;

Answer 2

您是否尝试过setTimeout调用来延迟onclick事件？

像这样：

<a href="#HDR" onClick="setTimeout(function(){showGallery.call(this)},20)">I</a>

Answer 3

你可以大大简化这一点，将href用于除纯导航之外的其他事情并不是一个好习惯。

<a onClick="showGallery('HDR')">I</a>

然后：

function showGallery(name){
    if(name) {
        $('#gallery').fadeIn('fast');
        alert(name);
    } else {

    }
}

Answer 4

如果你想在不遵循链接的情况下运行showGallery（），那么正确的代码就是：

<a href="#HDR" onClick="showGallery(); return false;">I</a>

通过保持href，用户仍然可以在状态栏中看到目的地，导航仍适用于没有Javascript的客户端（即Google）。通过在事件处理程序中返回false，可以阻止浏览器跟踪链接。

在showGallery（）中，您可以显示图库并添加“＃HDR＆＃39;到location.hash。

Answer 5

您无需验证窗口的哈希值，因为首次单击时地址栏中没有任何哈希值。该功能仅适用于第二次点击。

你可以做的是：

<a href="#HDR" id="g1" onClick="showGallery('g1')">gallery 1</a>

function showGallery(galid){
    var linkhash = $('#' + galid).attr('href').substring(1);

    alert(linkhash);

    $('#gallery' + linkhash).fadeIn('fast');
}

在onClick之前执行href

5 个答案: