How to use Highlight button onclick = ...

Navigation
1

I'm looking for a way to leave a button that is already selected when you open the page, or that is selected later, visible. Or rather, with highlight.

I'll leave the code I'm using below, I can swap between div and another perfectly, and the initial div is id="balances", it will always appear active when the page opens ... I would leave both the button which calls in the div, and the others in highlight when selected ...

Is it possible? With href "#" I know it works, but with onclick I can not find the solution, and in that 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 can not leave this onclick with highlight at all ... neither when opening the page nor clicking it later. But the divs are opening normally when called. Any Light?

Thanks! : D

    
asked by anonymous 02.05.2016 / 14:47

2 answers

0

If you just wanted the button to hold the selection if you did not click on anything else the code would be this:

I have used On functions in the divs and others can be added if necessary, I will show code ready and then I will 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 does each one do?

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

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

Now to keep the selection until you select another button, that is, it will be selected even by clicking outside the div, clicking another page, it will only remove the selection if you select 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 working in this example in JsFiddle

    
02.05.2016 / 15:49
0

You can not apply a style :visited to an element of 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 the localStorage some information that identifies that button was clicked, then when loading the page you recover 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 working at the following JSFiddle

    
02.05.2016 / 15:28
Quick-start sample app for PHP How to load only if clicked