javascript - 按下按钮时，使用 Javascript 在 HTML 中突出显示选项卡

Question

我在网页的一部分中有三个选项卡 - 信息、问题、订单。当我单击任何选项卡标题时，只有选定的选项卡突出显示。我在信息部分有两个按钮，链接到问题和订单选项卡。按下按钮时，相应的选项卡会正确显示，但不会突出显示相应的选项卡。

这是有问题的站点的 URL，3 个选项卡位于页面右侧:

https://webb.io/swebrush/produkt/barntandborste/

我确实尝试了一个 Bootstrap 代码，但它也没有很好地工作

帮助将不胜感激!

<script>
function openProductTab(evt, tabName) {
    var i, tabcontent, openProductTab;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tabProductLinks = document.getElementsByClassName("tabProductLinks");
    for (i = 0; i < tabProductLinks.length; i++) {
        tabProductLinks[i].className = tabProductLinks[i].className.replace(" active", "");
    }
    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>

/*----------------------*/
/*---Produkttabbar------*/
/*----------------------*/

.tabProdukter {
	 overflow: auto;
}

/*----------tab button---------*/


.tabProducts button{
	  color:#1e84d8;
  	/*margin-bottom: 0 px;*/
    background-color: #e7f6ff;
    float: left;
    cursor: pointer;
    transition: 0.1s;
	  width:33%;
		border-top: 1px solid #ebebeb;
	  border-left: 1px solid #ebebeb;
	  border-right: none;
		border-bottom: 1px solid #20a3eb;
}

.tabProducts button:hover{
		color: white;
	  background-color:#20a3eb;
}

.tabProducts button.active {
	color:#1e84d8;
	width: 33%;
	background-color: white;
	border-top: 1px solid #20a3eb;
	border-left: 1px solid #20a3eb;
	border-right: 1px solid #20a3eb;
	border-bottom: none;
}

.tabProducts button.active:hover{
	color: #20a3eb;
}

/* Style the tab content */
.tabcontent {
	  display: none;
    padding: 0px 0px;
}


.tabcontent ul{
	margin-left:0px;
}

.tabcontent li{
	list-style:none;

}
.tabcontent h3{
	border-bottom:dotted;
	border-bottom-width: 1px;
	border-color: #20a3eb;
	text-align:left;
	padding-top:20px;
	padding-bottom:5px;
	margin-bottom:5px;
  font-size:18px;
}

.tabcontent h4{
  color:#515151;
}

<div class="tabProducts" id="ProductInformationTabs">
  <button class="tabProductLinks" onclick="openProductTab(event, 'produktinformation')" id="defaultOpen">[icon name="info-circle" class="" unprefixed_class=""] Info</button><button class="tabProductLinks" onclick="openProductTab(event, 'flerFragor',)">[icon name="question-circle" class="" unprefixed_class=""] Frågor</button><button class="tabProductLinks" onclick="openProductTab(event, 'bestallNu')">[icon name="shopping-cart" class="" unprefixed_class=""] Beställ</button>
</div>

<div id="produktinformation" class="tabcontent">
<ul>
	<li><h3>[icon name="info-circle" class="" unprefixed_class=""]  Produktinformation</h3></li>
	<li>[icon name="clock-o" class="blue1ColorClass" unprefixed_class=""] Leveranstid: <span style="color: #1e84d8;">1-2 veckor</span></li>
	<li>[icon name="arrow-circle-o-down" class="blue1ColorClass" unprefixed_class=""] Minsta antal: <span style="color: #1e84d8;">100 st</span></li>
	<li>[icon name="adjust" class="blue1ColorClass" unprefixed_class=""] Färger: [icon name="circle" class="blueColorClass" unprefixed_class=""] [icon name="circle" class="redColorClass" unprefixed_class=""] [icon name="circle" class="greenColorClass" unprefixed_class=""] [icon name="circle" class="blackColorClass" unprefixed_class=""]</li>
	<li><a href="http://webb.io/swebrush/wp-content/uploads/tandborstar_tryckmall_för_profiltryck.pdf">[icon name="download" class="blue2ColorClass alignright" unprefixed_class=""]</a> Mall för nedladdning: <a href="http://webb.io/swebrush/wp-content/uploads/tandborstar_tryckmall_för_profiltryck.pdf"><span style="color: #1e84d8;">Tandborstar.pdf</a></span></li>

</ul>
<ul>
	<li><h4>Är du intresserad av att beställa produkten?</h4></li>
	<li><button class="buttonDefault" onclick="openProductTab(event, 'flerFragor','defaultOpen')">Jag har fler frågor  [icon name="question-circle" class="" unprefixed_class=""]</button></li>
	<li><button class="buttonOrderClass" onclick="openProductTab(event, 'bestallNu')">Beställ nu  [icon name="shopping-cart" class="" unprefixed_class=""]</button></li>
</ul>
</div>

<div id="flerFragor" class="tabcontent">
<ul>
	<li><h3>[icon name="question-circle" class="" unprefixed_class=""]  Jag har några frågor först</h3></li>
	<li>Att beställa profilprodukter på webben är inte alltid en dans på rosor. Vilken tur att vi har duktiga personer som gärna assisterar dig i din beställning. Skicka in dina funderingar via kontaktformuläret så återkommer rätt person till dig! Du kan även ringa oss på , maila till kundservice@prendo.se eller skriva till oss direkt i chatten när den är bemannad.[contact-form-7 id="6" title="KONTAKTA OSS"]</li>
</ul>
</div>

<div id="bestallNu" class="tabcontent">
<ul>
	<li><h3>[icon name="shopping-cart" class="" unprefixed_class=""]  Beställ nu</h3></li>
	<li>Nu är du ett steg närmre! Välj önskad variant och antal och lägg sedan till produkten i varukorgen. Känner du dig osäker och behöver hjälp får du gärna kontakta oss.[contact-form-7 id="6" title="KONTAKTA OSS"]</li>
</ul>
</div>

Answer 1

改用类列表:

添加:

evt.currentTarget.classList.add("mystyle");

删除:

evt.currentTarget.classList.remove("mystyle");

切换:

evt.currentTarget.classList.toggle("mystyle");

替换:

evt.currentTarget.classList.replace( oldClass, newClass );

可以找到更多信息 here .