0

I am trying to custom tabs. When a tab is active, I would like it to have its title underlined. I don't know why, but I can't reach it with CSS, it must need a css syntaxe I can't think of.

So, I was thinking maybe to custom my html code with some css property? Is there anyway to attribute the onmouseover with visited, hover and active to my <div> in html?

Here is HTML I have

<div class="container">
  <div class="tabcordion">
    <ul class="nav nav-pills nav-stacked col-lg-6 col-md-6 col-sm-6 col-xs-12">
      <li class="active"><a data-target=".KONTAKT">KONTAKT</a></li>
      <li><a data-target=".ÜBER_UNS">ÜBER UNS</a></li>
    </ul>
    <div class="tab-content col-lg-6 col-md-6 col-sm-6 col-xs-12">
      <div class="KONTAKT in active">My content #1.</div>
      <div class="ÜBER_UNS">My content #2.</div>
    </div>
  </div>
</div>
Lolo
  • 125
  • 2
  • 16

2 Answers2

1

Plain JS solution:

  • Give each tab a separate class, in this example .option#
  • Set each to underline its title and content on click.

document.querySelector('.option1').addEventListener('click', function() {
  //remove underline from any non selected tab title
  document.querySelector('.option2').classList.remove('underline');
  // underline clicked tab title
  this.classList.add('underline');
})
document.querySelector('.option2').addEventListener('click', function() {
  document.querySelector('.option1').classList.remove('underline');
  this.classList.add('underline');
})
.underline {
  text-decoration: underline;
}
<div class="container">
  <div class="tabcordion">
    <ul class="nav nav-pills nav-stacked col-lg-6 col-md-6 col-sm-6 col-xs-12">
      <li class="option1 active underline"><a data-target=".KONTAKT">KONTAKT</a></li>
      <li class="option2"><a data-target=".ÜBER_UNS">ÜBER UNS</a></li>
    </ul>
    <div class="tab-content col-lg-6 col-md-6 col-sm-6 col-xs-12">
      <div class="KONTAKT in active">My content #1.</div>
      <div class="ÜBER_UNS">My content #2.</div>
    </div>
  </div>
</div>
Syden
  • 8,425
  • 5
  • 26
  • 45
  • you really have target my issue! This works, but only half way. The content of the tabs get underlined too now. I would like to have the content as normal text. – Lolo Sep 05 '17 at 16:32
  • @Lolo, check now. – Syden Sep 05 '17 at 16:34
  • I have different result: I a working on PHP page, from where my header and tabs plugin are loaded. My html is setted in Wordpress. When I paste whole html you gave me in Wordpress, the tabs' content is not showing up. When I past the jquery script link in my php page, content #1 and #2 appear in both tabs, but there are not underlined! And when I past the jquery script link in my PHP page before my tabs plugin script, content is not showing up. – Lolo Sep 05 '17 at 16:43
  • @Lolo, try now, there maybe a conflict with the .active class, I switched to underline class just in case. Also, consider here it´s working fine and I can only go as far your shared scenario, there may be other variables I'm unable to see. – Syden Sep 05 '17 at 16:47
  • It is same result: the content gets underlined. Here is my page [link](http://temporarygallery.org/do-not-remove-this-folder/institution/) where you can see the result. – Lolo Sep 05 '17 at 16:51
  • @Lolo, .active class is what´s underlining your content, hence I edited to a .underline named class. Look the example above, you define the underline class with its underine property, then assign it to option1 so it`s underlined as default, then the rest should just work upon clicks. Otherwise the underline is being applied by the same active class which you are using for content displaying as well. TLDR: add .underline {text-decoration: underline;} to your CSS. – Syden Sep 05 '17 at 17:01
  • My bad, I forgot to change .active to .underline in CSS. Ok, now the content is not underline anymore. But only the first tab gets underlined, when I click on the second it is not underline when it is active. Did I miss something here..? – Lolo Sep 05 '17 at 17:06
  • Yes, the jQuery part. – Syden Sep 05 '17 at 17:08
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/153706/discussion-between-lolo-and-syden). – Lolo Sep 05 '17 at 17:09
0

If theres is an <a> tag in you div try some inline stlye tag before the div element. E.G:

<style type="text/css">
   #your-div-id a:visited {
   }
</style>
<div id="your-div-id"><a href="#">Foo</a></div>

Otherwise you only can handle the hover effect with the following CSS style.

#your-div-id:hover {
  color: red
}

The div element not stores the visited history like a <a> element. If you want to achieve the same effect, you need to implement it with a little JavaScript, which stores the visit event into a browser persistance layer (Cookie, Storage API). And after page load an init JS script should read the information from the persistance layer and add some class to the div element.

xrissz
  • 188
  • 9