Highlight tab in HTML using Javascript when a button is pressed,

JavaScript
1

Hello,

I have three tabs - 1.“info”, 2. “questions”, and 3. “place order” in one part of the webpage. When I click on any of the tab header, only that selected tab highlights. I have two buttons in the “info” section with links to “questions” and “place order” tab. When the button is pressed, the respective tab is shown correctly, but it does not highlight the respective tab.

This is the URL to the site with the problem, the 3 tabs are located to the right on the page:

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

I did try a Bootstrap code, but it did not work very well either

Any help to make the script work would be much appreciated!

Java

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

HTML

<div class="tabProducts" id="ProductInformationTabs">
  <button class="tabProductLinks" onclick="openProductTab(event, 'produktinformation')" id="defaultOpen">Info</button><button class="tabProductLinks" onclick="openProductTab(event, 'flerFragor',)">Frågor</button><button class="tabProductLinks" onclick="openProductTab(event, 'bestallNu')">Beställ</button>
</div>

<div id="produktinformation" class="tabcontent">
<ul>
	<li><h3>Produktinformation</h3></li>
	<li>Tab1</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>Jag har några frågor först</h3></li>
	<li>Tab2<li>
</ul>
</div>

<div id="bestallNu" class="tabcontent">
<ul>
	<li><h3>Beställ nu</h3></li>
	<li>Tab3</li>
</ul>
</div>

CSS

/*----------------------*/
/*---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;
}
2

Hi @daniel154, the .currentTarget property of an event refers to the element to which you added the event listener (or in this case, the onclick attribute). So with this line

evt.currentTarget.className += " active";

you’re adding the “active” class to the button inside the tab panel, not to the tab header. The best way to keep the state of the tab component consistent would be to call the function that is normally responsible for handling the tabs; if you don’t have access to that function, you might instead trigger a click event:

var productLinks = document.querySelectorAll('.tabProductLinks')

// Open "questions"
productLinks[1].click()

// Open "order"
productLinks[2].click()

BTW, if you want to modify classes I’d suggest to do this via the .classList property – your string replacement would fail if the “active” class is the only class, or the first class in the list. Using classList.add() and classList.remove() is cleaner and more robust.

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.