How to change the color of the tab when it is selected(active) ?

anujnadig07
Kilo Contributor

Hi all,

By using content management system I have created 3 different pages and given 3 different table's URL to all the 3 pages by using Iframes.

I have given 3 separate tabs for all the pages in the main page. On select of tabs in the main page, color of the tab should change according to the selection of the user.

tabs.png

I have written active class to give color to the main page tab. Now not getting how to change that active class based on the   selection of the tabs.

<li class="active" role="presentation"><a role="tab" data-toggle="tab" href="form.do">New Project Request</a></li>

Thanks in advance,

Anuj

2 REPLIES 2

sunilsafare
Mega Guru

Hi Anuj,



I am not expert in html. However when I am exploring in google found this link.



javascript - How to highlight the selected tab? - Stack Overflow



Hope it helps you.



Thanks,


Sunil Safare


Nana5
Mega Guru

Hi


Please try the below example :


<ul class="tab">


  <li><a href="#" class="tablinks" onclick="openCity(event, 'London')">London</a></li>


  <li><a href="#" class="tablinks" onclick="openCity(event, 'Paris')">Paris</a></li>


  <li><a href="#" class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</a></li>


</ul>



<div id="London" class="tabcontent">


  <h3>London</h3>


  <p>London is the capital city of England.</p>


</div>



<div id="Paris" class="tabcontent">


  <h3>Paris</h3>


  <p>Paris is the capital of France.</p>


</div>



<div id="Tokyo" class="tabcontent">


  <h3>Tokyo</h3>


  <p>Tokyo is the capital of Japan.</p>


</div>