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

Question

单击选项卡元素时，可以在手风琴上删除哈希元素吗？我在WordPress中使用视觉作曲家的手风琴。

我有一些代码：

<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。我只需要一个小的"解决方案"，即可在单击事件时如何删除URL的哈希更改。

Answer 1

您可以这样使用：

更新：29/06/2017 17:40

如果您想在没有哈希的情况下更改URL，则可以像以下那样使用。重要的是什么？我们现在使用历史记录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 Way：

$(".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 Way：

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

Answer 2

纯JavaScript代码

var linkElement = document.querySelectorAll('.bullet-toc ul li a');
            linkElement.forEach(function(item){
                item.addEventListener('click', function(e){
                    e.preventDefault();
                    var hyperLink = this.getAttribute('href');
                    var redirectTo = hyperLink.replace('#', '');
                    document.getElementById(redirectTo).scrollIntoView({behavior: "smooth"});
                })
            })

希望这可能会有所帮助〜rdaksh