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 に答える