使用javascript显示/隐藏div而不刷新页面答案

【问题标题】：Show/Hide div using javascript without page refresh使用javascript显示/隐藏div而不刷新页面
【发布时间】：2013-03-01 23:22:32
【问题描述】：

我有一个在页面上显示/隐藏多个独立 div 的脚本。问题是当你点击显示一个 div 时，无论在页面的哪个位置，它都会自动聚焦在第一个 div 上。有没有办法专注于显示的 div？

这里是javascript：

   function toggleOptions(e) {
        var ele = e;
        var text = e.parentElement.querySelector('.toggleOptions')

    if(text.style.display == "none") {
        //ele.style.display = "none";
        text.style.display = "block";
        text.innerHTML = "TESTING";
        ele.innerHTML = "hide";
    }
    else {
        text.style.display = "none";
        //text.innerHTML = "Hide GPS";
        ele.innerHTML = "show";
    }

    return false;
     }

这里是html：

<div>
    <a href="#" onclick="toggleOptions(this);" style="display:block;">
        show
     </a>
      <div class="toggleOptions" style="display: none">
        ITEM 1 OPTIONS
     </div>
</div>
<div>
    <a href="#" onclick="toggleOptions(this);" style="display:block;">
        show
     </a>
      <div class="toggleOptions" style="display: none">
        ITEM 2 OPTIONS
     </div>
</div>
<div>
    <a href="#" onclick="toggleOptions(this);" style="display:block;">
        show
     </a>
      <div class="toggleOptions" style="display: none">
        ITEM 3 OPTIONS
     </div>
</div>

这里是http://jsfiddle.net/YE6XZ/1/的一个杰作@

【问题讨论】：

这必须是特定于浏览器的。使用 firefox，焦点是点击的div。

标签： javascript jquery

【解决方案1】：

给你的节目链接一个类，比如：

<a class="show" href="#" onclick="toggleOptions(this);" style="display:block;">show</a>

然后将其添加到您的 jQuery 中：

$('a.show').click(function(e){
    e.preventDefault();
});

书签锚点 (href="#") 的默认操作是跳转到页面顶部。这将阻止这种情况。 jsFiddle example

另一种无 jQuery 的方法是将您的点击次数更改为：

onclick="return toggleOptions(this);"

因为您已经返回 false。 jsFiddle example

【讨论】：

如果你没有注意到，他的例子中没有jQuery，甚至在jsfiddle中也没有。
@NickMitchinson - 是的，我当然注意到了。但是问题是用它标记的。
@NickMitchinson 是的，但是 OP 确实用jQuery 标签标记了他的问题，因此我想 j08691 可以提出一个 jQuery 答案。
@NickMitchinson - 我也用无 jQuery 的解决方案更新了我的答案。
您可以将 jquery 与 javascript 一起使用；) 所以效果很好！谢谢！

【解决方案2】：

我相信您也可以使用.focus() 方法来关注给定的元素。在您的示例中：

function toggleOptions(e) {
    var ele = e;
    var text = e.parentElement.querySelector('.toggleOptions')

    if(text.style.display == "none") {
        //ele.style.display = "none";
        text.style.display = "block";
        text.innerHTML = "TESTING";
        text.focus(); //This should give focus to the newly shown text element
        ele.innerHTML = "hide";
    }
    else {
        text.style.display = "none";
        //text.innerHTML = "Hide GPS";
        ele.innerHTML = "show";
    }

    return false;
}

除非我误解了你想要做什么......

【讨论】：

【解决方案3】：

在 href 中使用 javascript:void(0)。使用 javascript 函数使用 id 显示或隐藏

<a href="javascript:void(0)">Show</a>

【讨论】：