javascript - 单击事件时删除 url 中的哈希更改

Question

当点击 Tab 元素时，可以删除 Accordion 上的哈希元素吗？我在 Wordpress 的 Visual Composer 中使用 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>

我提到的问题是 Accordion - 当我点击选项卡时 - url 获取哈希和 ID - 我不需要哈希，只需要 ID。我只需要一个小的“解决方案”，如何在点击事件时删除 url 中的哈希更改。

Answer 1

你可以这样使用:

更新时间:29/06/2017 17:40

如果你想在没有哈希的情况下更改 url，你可以像下面这样使用。重点是什么？我们使用 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) {
	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) => {
	
  // handle clicked tab element
	clicked[i].addEventListener("click", (e) => {
		e.preventDefault();
    
    //get clicked link's href attributeç
		let getID = clicked[i].getAttribute('href');
		
    //hide all divs
    Array.prototype.slice.call(document.querySelectorAll(".vc_tta-panel")).forEach(function(value){
		 value.style.display = "none";
		});
    
    // show clicked div.
		document.querySelector(getID).style.display = "block";
	});
})

.vc_tta-panel {
	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>