Question

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

这是出现问题的网站的URL，三个选项卡位于页面的右侧：

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

我确实尝试了Bootstrap代码，但是它也不能很好地工作

我们将不胜感激！

/*----------------------*/
/*---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_fö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_fö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>

class Foo(models.Model):
    a = models.ForeignKey(...)
    number = models.IntegerField()

    @transaction.atomic
    def save(self, commit=True):
        if self.pk is None:            
            current_max = (
                Foo.objects
                .filter(a=self.a)
                .order_by('-number')
                .first()
            )
            current_max = 0 if current_max is None else current_max.number
            self.number = current_max + 1
        return super().save(commit)

Answer 1

改为使用classList：

要添加：

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

要删除：

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

要切换：

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

要替换：

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

更多信息here。

Answer 2

非常感谢您的回答，非常感谢！

我试图使其与classList一起使用，这似乎是正确的方法！我试图通过youTube，w3schools和developer.mozilla使脚本起作用，但不幸的是，我不足以使它自己起作用。

我了解如何使用classList添加和删除元素的命令，但是我无法将其实现到脚本中。

因此，如果有人有时间帮助我如何将其具体实现到我的脚本中，我将不胜感激！

按下按钮后，使用Javascript突出显示HTML中的标签

2 个答案: