单击事件时删除url中的散列更改

Question

单击Tab元素时是否可以删除手风琴上的散列元素？我在Wordpress的Visual中使用手风琴。

我有一些密码：

<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。我只需要一个小的“解决方案”，如何在单击事件时删除url中的散列更改。

Answer 1

你可以这样使用：

更新日期:2017年6月29日17:40

如果您想要更改urls而不使用散列，您可以使用如下所示。重要的是什么？我们现在使用历史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有所帮助