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>

我提到的问题是手风琴 - 当我点击Tabs时 - url获取哈希和ID - 我不想要哈希，只需要ID。我只需要一个小小的解决方案＆＃39;如何在点击事件时删除网址中的哈希更改。

Answer 1

您可以这样使用：

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

如果你想在不使用哈希的情况下更改网址，可以使用如下所示。重点是什么？我们现在使用history API。

OSError, IOError, UnicodeDecodeError, RuntimeError, Exception

这是一个非常基本的例子，所以可能是不好的做法。您可以实现与jQuery一起使用。

jQuery方式：

＆＃13;

$(".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('#', ''))

})

＆＃13;

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

＆＃13;

.vc_tta-panel {
  display: none;
}

＆＃13;

VanillaJS Way：

＆＃13;

<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>

＆＃13;

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

＆＃13;

.vc_tta-panel {
	display: none;
}

＆＃13;

单击事件时删除URL中的哈希更改

1 个答案: