删除点击事件中的哈希值变化

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>