Problems with Tabs

user_12928073 0
Viewed 68

I need help with tabs. When is selected first button background color is gray and text in first button is white that okay, but on my second button background color is gray-white and text is white. I want to add grey text color to that second button?

HTML:

<button class="tablink" id="defaultOpen" onclick="openPage('Home', this, '#6D6E70')">First Button</button>
<button class="tablink" onclick="openPage('News', this, '#6D6E70')">Second Button</button>

<div id="Home" class="tabcontent">
  <h3>Home</h3>
  <p>Home is where the heart is..</p>
</div>

<div id="News" class="tabcontent">
  <h3>News</h3>
  <p>Some news this fine day!</p>
</div>

CSS:

.tablink {
  display: inline-block;
    min-width: 128px;
    font-size: 16px;
    padding: 8px;
    color: #fff;
    font-weight: 500;
    text-decoration: none;
    background-color: #F2F2F2;
}

.tablink:hover {
  background-color: #777;
}

/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
  color: white;
  display: none;
  padding: 100px 20px;
  height: 100%;

}

Java Script:

<script>
function openPage(pageName,elmnt,color) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
  }
  document.getElementById(pageName).style.display = "block";
  elmnt.style.backgroundColor = color;

}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>

I try add to java script code in document.getElementsByClassName("tablink")

tablinks[i].style.color = "#fff";

But not working

css html javascript
1 Answers

If you want to change second button text color after clicking on it, you can simply add this line:

if (pageName === 'News') {
  elmnt.style.color = 'black';
}

Here's JSfiddle.

However you'd be better off using CSS to properly style those elements the way you want. Let me know if you need further assistance with that.

EDIT:

Since it has been cleared out what you're trying to achieve, the best way to tackle your problem would be to do it by toggling classes. Here's JSfiddle.

Basically, I've added two extra classes .selected, and .visible, one for buttons, other for divs, like so:

HTML:

<button class="tablink selected" onclick="openPage('Home', this)">First Button</button>
/* ... */
<div id="Home" class="tabcontent visible">
  <h3>Home</h3>
  <p>Home is where the heart is..</p>
</div>

CSS:

.tablink.selected {
  color: #fff;
  background-color: #6D6E70;
}
.tabcontent.visible {
  display: block;
}

And shortened your JS code:

function openPage(pageName, elmnt) {
  document.querySelector('.tablink.selected').classList.remove('selected');
  elmnt.classList.add('selected');

  document.querySelector('.tabcontent.visible').classList.remove('visible');
  document.getElementById(pageName).classList.add('visible');
}

So whenever you click, it looks for a selected/visible element, removes those extra classes, and adds them back to the button that has been pressed and div that corresponds to it.

user_48352010
Related