Question

我有一个脚本在页面上显示/隐藏多个独立的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/

的一个小问题

Answer 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的方法是将你的onclicks更改为：

onclick="return toggleOptions(this);"

因为你已经回复了假。的 jsFiddle example

Answer 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;
}

除非我误解了你想做的事情......

Answer 3

在href中使用javascript：void（0）。使用javascript函数显示或隐藏使用id

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

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

3 个答案: