0

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

这是工作的一个 jfiddle http://jsfiddle.net/YE6XZ/1/

4

3 回答 3

1

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

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

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

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

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

另一种无 jQuery 的方法是将您的 onclicks 更改为：

onclick="return toggleOptions(this);"

因为您已经返回 false。jsFiddle 示例

于 2013-03-13T20:00:46.267 回答
0

我相信您也可以使用该.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;
}

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

于 2013-03-13T20:09:08.590 回答
0

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

<a href="javascript:void(0)">Show</a>
于 2017-02-07T09:50:41.787 回答