使用javascript顯示/隱藏div而不刷新頁面

我有一個腳本，顯示/隱藏頁面上的多個獨立div。問題是，當你點擊顯示一個div時，無論頁面上的哪個位置，它都會自動關注第一個div。有沒有辦法專注於顯示的div？使用javascript顯示/隱藏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/

來源

2013-03-13 Die 20

這必須是瀏覽器特定的。使用Firefox時，重點是點擊'div'。 – 2013-03-13 20:05:49

的jfiddle給你的表演環節的一類，如：

<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);"

因爲你已經返回false。 jsFiddle example

來源

2013-03-13 20:00:46 j08691

如果你沒有注意到，他的例子中沒有jQuery，甚至沒有包含在jsfiddle中。 – 2013-03-13 20:03:26

@ NickMitchinson - 是的，我當然注意到了。然而，問題是用它來標記的。 – j08691 2013-03-13 20:04:16

@NickMitchinson是真的，但是OP用'jQuery'標記標記了他的問題，因此j08691被允許提出我想的jQuery答案。 – 2013-03-13 20:05:02

我相信你也可以使用.focus()方法專注於給定的元素。在您的例子：在HREF無效（0）：

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-13 20:09:08

使用JavaScript。使用javascript函數顯示或隱藏使用ID

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

來源

2017-02-07 09:50:41

使用javascript顯示/隱藏div而不刷新頁面

回答

相關問題