刪除點擊事件中的哈希值變化

Question

單擊Tab元素時，可以刪除Accordion上的哈希元素嗎？ 我在Wordpress中使用可視化編輯器中的Accordion。

我有一些代碼：

<ul class="vc_tta-tabs-list"> 
    <li class="vc_tta-tab"> 
    <a href="#ID-element-1">Tab 1</a> 
    </li> 
    <li class="vc_tta-tab"> 
    <a href="#ID-element-2">Tab 2</a> 
    </li> 
    <li class="vc_tta-tab"> 
    <a href="#ID-element-3">Tab 3</a> 
    </li> 
    <li class="vc_tta-tab"> 
    <a href="#ID-element-4">Tab 4</a> 
    </li> 
</ul> 

和

<div class="vc_tta-panel" id="ID-element-1>SOME TEXT 1</div> 
<div class="vc_tta-panel" id="ID-element-2>SOME TEXT 2</div> 
<div class="vc_tta-panel" id="ID-element-3>SOME TEXT 3</div> 
<div class="vc_tta-panel" id="ID-element-4>SOME TEXT 4</div> 

，我提的是手風琴的問題 - 當我點擊選項卡 - URL獲取哈希和ID - 我不想散列，只有ID。我只需要一個小小的'解決方案'，我可以如何在點擊事件中刪除網址中的哈希變化。

Answer 1

你可以使用這樣的：

更新：29/06/2017 17:40

如果你想改變的網址沒有哈希，你可以使用如下。重要的一點是什麼？我們現在使用history API。

$(".vc_tta-tab > a").on("click", function(e) { 
    e.preventDefault(); 
    let getID = $(this).attr('href') 
    $("div").hide(); 
    $(getID).show(); 
    history.pushState(null, null, getID.replace('#', '')) 

}) 

這是一個非常基本的例子，所以可能是不好的做法。你可以實現與jQuery一起使用。

jQuery的方式：

$(".vc_tta-tab > a").on("click", function(e) { 
 
\t e.preventDefault(); 
 
    let getID = $(this).attr('href') 
 
    $("div").hide(); 
 
    $(getID).show(); 
 
})

.vc_tta-panel { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul class="vc_tta-tabs-list"> 
 
    <li class="vc_tta-tab"> 
 
    <a href="#ID-element-1">Tab 1</a> 
 
    </li> 
 
    <li class="vc_tta-tab"> 
 
    <a href="#ID-element-2">Tab 2</a> 
 
    </li> 
 
    <li class="vc_tta-tab"> 
 
    <a href="#ID-element-3">Tab 3</a> 
 
    </li> 
 
    <li class="vc_tta-tab"> 
 
    <a href="#ID-element-4">Tab 4</a> 
 
    </li> 
 
</ul> 
 

 
<div class="vc_tta-panel" id="ID-element-1">SOME TEXT 1</div> 
 
<div class="vc_tta-panel" id="ID-element-2">SOME TEXT 2</div> 
 
<div class="vc_tta-panel" id="ID-element-3">SOME TEXT 3</div> 
 
<div class="vc_tta-panel" id="ID-element-4">SOME TEXT 4</div>

VanillaJS方式：

//select all tab elements 
 
const clicked = document.querySelectorAll(".vc_tta-tab > a") 
 

 
// iterate all tab elements 
 
clicked.forEach((k,i) => { 
 
\t 
 
    // handle clicked tab element 
 
\t clicked[i].addEventListener("click", (e) => { 
 
\t \t e.preventDefault(); 
 
    
 
    //get clicked link's href attributeç 
 
\t \t let getID = clicked[i].getAttribute('href'); 
 
\t \t 
 
    //hide all divs 
 
    Array.prototype.slice.call(document.querySelectorAll(".vc_tta-panel")).forEach(function(value){ 
 
\t \t value.style.display = "none"; 
 
\t \t }); 
 
    
 
    // show clicked div. 
 
\t \t document.querySelector(getID).style.display = "block"; 
 
\t }); 
 
})

.vc_tta-panel { 
 
\t display: none; 
 
}

<ul class="vc_tta-tabs-list"> 
 
    <li class="vc_tta-tab"> 
 
    <a href="#ID-element-1">Tab 1</a> 
 
    </li> 
 
    <li class="vc_tta-tab"> 
 
    <a href="#ID-element-2">Tab 2</a> 
 
    </li> 
 
    <li class="vc_tta-tab"> 
 
    <a href="#ID-element-3">Tab 3</a> 
 
    </li> 
 
    <li class="vc_tta-tab"> 
 
    <a href="#ID-element-4">Tab 4</a> 
 
    </li> 
 
</ul> 
 

 
<div class="vc_tta-panel" id="ID-element-1">SOME TEXT 1</div> 
 
<div class="vc_tta-panel" id="ID-element-2">SOME TEXT 2</div> 
 
<div class="vc_tta-panel" id="ID-element-3">SOME TEXT 3</div> 
 
<div class="vc_tta-panel" id="ID-element-4">SOME TEXT 4</div>