How to use Highlight <button onclick=...>

Question

I am looking for a way to leave a button that is already selected when opening the page, or that is selected later, visible. Or rather, with Highlight.

I will leave down the code I am using, I can switch between a div and another perfectly, and the initial div is id="balances", this will always appear active when the page opens... I would like to leave both the call button in the incial div, as the others in Highlight when selected...

Is it possible? With href"#" I know it’s right, but with onclick I’m not able to find the solution, and in this case, it will need to be onclick...

function show(elementID) {
  var ele = document.getElementById(elementID);
  if (!ele) {
    alert("no such element");
    return;
  }
  var pages = document.getElementsByClassName('big-one');
  for(var i = 0; i < pages.length; i++) {
    pages[i].style.display = 'none';
  }
  ele.style.display = 'block';
}

<div class="admix">
  <div class="topox"><h class="topotext">TITLE TOPO</h></div>
  <!--refazer bordas-->
  <div class="admenus">
    <button class=admenus1 onclick="show('balances');"> Balances </button>
    <button class=admenus1 onclick="show('stats');"> Stats </button>
    <button class=admenus1 onclick="show('configs');"> Configurations </button>
    <button class=admenus1 onclick="show('pagez');"> Page </button>
  </div>

  <div class="big-one" id="balances">
    inside balances div
  </div>

  <div class="big-one" id="stats"  style="display:none">
    inside stats div
  </div>

  <div class="big-one" id="configs" style="display:none">
    inside config div
  </div>

  <div class="big-one" id="pagez" style="display:none">
    inside page div
  </div>
</div>

I cannot leave this onclick with Highlight in any way... neither when opening the page, nor when clicking afterwards. But the Divs are opening normally when called. Some Light?

Thank you! D

Answer 1

you can’t apply a style :visited is an element of the type button.

What you can do, is create a class in css to style a button.admenus1 that has already been clicked.

Then you should store in localStorage some information that identifies the button was clicked, then when loading the page you retrieve this information.

var buttons = document.querySelectorAll("[data-show]");
var current = document.querySelector(".big-one.show");
    
[].forEach.call(buttons, function (button, indice) {
  var bigOne = document.getElementById(button.dataset.show);  
  var seletor = "'[data-show='" + button.dataset.show + "']";  
  if (localStorage.getItem(seletor) === "true") {
    button.classList.add("visited");
  }  
  if (bigOne) {
    button.addEventListener("click", function () {      
      localStorage.setItem(seletor, "true");
      button.classList.add("visited");
      current.classList.remove("show");
      current = bigOne;
      current.classList.add("show");
    });
  }
});

.admenus1.visited {
  color: purple;
}

.big-one {
  display: none;
}

.big-one.show {
  display: block;
}

<div class="admix">
  <div class="topox"><h class="topotext">TITLE TOPO</h></div>
  <!--refazer bordas-->
  <div class="admenus">
    <button class="admenus1" data-show="balances"> Balances </button>
    <button class="admenus1" data-show="stats"> Stats </button>
    <button class="admenus1" data-show="configs"> Configurations </button>
    <button class="admenus1" data-show="pagez"> Page </button>
  </div>
  <div class="big-one show" id="balances">
    inside balances div
  </div>
  <div class="big-one" id="stats">
    inside stats div
  </div>
  <div class="big-one" id="configs">
    inside config div
  </div>
  <div class="big-one" id="pagez">
    inside page div
  </div>
</div>

due to a limitation of the OS Snippet, the above example will not work. You can see the same example running in the following Jsfiddle

Answer 2

If you just wanted the button to hold the selection if you didn’t click anything else the code would be this:

I used functions On on the Divs and others can be added if necessary, I will show the code ready and then explain the functions.

function show(elementID) {
  var ele = document.getElementById(elementID);
  if (!ele) {
    alert("no such element");
    return;
  }
  var pages = document.getElementsByClassName('big-one');
  for(var i = 0; i < pages.length; i++) {
    pages[i].style.display = 'none';
  }
  ele.style.display = 'block';
}

<div class="admix">
  <div class="topox"><h class="topotext">TITLE TOPO</h></div>
  <!--refazer bordas-->
  <div class="admenus">
    <button class=admenus1 onfocus="this.style.backgroundColor='#ff0';" onblur="this.style.backgroundColor='#fff';" onclick="show('balances');"> Balances </button>
    <button class=admenus1 onfocus="this.style.backgroundColor='#ff0';" onblur="this.style.backgroundColor='#fff';" onclick="show('stats');"> Stats </button>
    <button class=admenus1 onfocus="this.style.backgroundColor='#ff0';" onblur="this.style.backgroundColor='#fff';" onclick="show('configs');"> Configurations </button>
    <button class=admenus1 onfocus="this.style.backgroundColor='#ff0';" onblur="this.style.backgroundColor='#fff';" onclick="show('pagez');"> Page </button>
  </div>

  <div class="big-one" id="balances">
    inside balances div
  </div>

  <div class="big-one" id="stats"  style="display:none">
    inside stats div
  </div>

  <div class="big-one" id="configs" style="display:none">
    inside config div
  </div>

  <div class="big-one" id="pagez" style="display:none">
    inside page div
  </div>
</div>

What we have are functions OnFocus and OnBlur, now what each one does?

OnFocus works with the selection, that is, in the click and function OnBlur works with the "mouse out" ie mouse output, mouse blur by clicking on an area outside the div or button in the case.

Making it clear that the button changes its color after the OnBlur by having its color modified by the function, if using CSS can use normally in function.

Now to keep the selection until selecting another Utan, that is, it will be selected even by clicking outside the div, clicking on another page, it will only take the selection if selected another tab.

$(document).ready(function() {
  $(".tabs-menu a").click(function(event) {
    event.preventDefault();
    $(this).parent().addClass("current");
    $(this).parent().siblings().removeClass("current");
    var tab = $(this).attr("href");
    $(".tab-content").not(tab).css("display", "none");
    $(tab).fadeIn();
  });
});

body {
  padding: 20px;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5;
  font-size: 14px;
}
.tabs-menu {
  height: 30px;
  float: left;
  clear: both;
}
.tabs-menu li {
  height: 30px;
  line-height: 30px;
  float: left;
  margin-right: 10px;
  background-color: #ccc;
  border-top: 1px solid #d4d4d1;
  border-right: 1px solid #d4d4d1;
  border-left: 1px solid #d4d4d1;
}
.tabs-menu li.current {
  position: relative;
  background-color: #fff;
  border-bottom: 1px solid #fff;
  z-index: 5;
}
.tabs-menu li a {
  padding: 10px;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
}
.tabs-menu .current a {
  color: #2e7da3;
}
.tab {
  border: 1px solid #d4d4d1;
  background-color: #fff;
  float: left;
  margin-bottom: 20px;
  width: auto;
}
.tab-content {
  width: 660px;
  padding: 20px;
  display: none;
}
#tab-1 {
  display: block;
}

<div class="admix">
  <div class="topox">
    <h class="topotext">TITLE TOPO</h>
  </div>
  <!--refazer bordas-->
  <div id="tabs-container">
    <ul class="tabs-menu">
      <li> <a href="#tab-1">Balances </a>
      </li>
      <li> <a href="#tab-2">Stats </a>
      </li>
      <li> <a href="#tab-3">Configurations </a>
      </li>
      <li> <a href="#tab-4">Page</a> 
      </li>
    </ul>
    <div class="tab">
      <div id="tab-1" class="tab-content">
        inside balances div
      </div>

      <div id="tab-2" class="tab-content">
        inside stats div
      </div>

      <div class="big-one" id="configs" style="display:none">
        inside config div
      </div>

      <div id="tab-3" class="tab-content">
        inside page div
      </div>
      <div id="tab-4" class="tab-content">
        inside some div
      </div>
    </div>
  </div>

For problems in the Stack snippet you can see running in this example in Jsfiddle