change color of selected tab with dynamic children of top navigation in sharepoint 2013

Question

Is there any option to change color of selected tab with dynamic children of top navigation in sharepoint 2013

Answer 1

Here is how I coded my nav. The script will detect which link is clicked and the css will then highlight it. Wrap your navigation with this code in your master page:

<script type="text/javascript">
$(function() {
$('nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('activeMenu');
});
</script>

<div id="sse50">
  <nav id="sses50">
  <ul>
        <li> <a href="/Page1"><img alt="" src="Navigation/Page1.png" ></a></li>
        <li> <a href="/Page2"><img src="Navigation/Page2.png" ></a></li>
        <li> <a href="/Page3"><img src="Navigation/Page3.png" ></a></li>
  </ul>
  </nav>
</div>

CSS:

#sse50 
{
  width:90%;
  padding:0px;/*changing its value will give menu margins to its container*/
  text-align:center;
  border-radius: 20px;
}
#sses50
{
  margin:0 auto;/*If you don't want the menu center aligned, remove this line and above  text-align:center*/

}

#sses50 ul, #sses50 li
{
  display: inline;
  list-style-type: none;padding: 0;margin: 0;border:0;background-image:none;
}

#sses50 a.activeMenu
{
background:#005d84;
border-radius:25px 25px 25px 25px;
margin:7px 0px 7px 0px;
padding: 10px 10px 10px 10px;/*This defines the size of each menu item*/
}
#sse50 img
{
width:100%;
}
#sses50 a
{
  text-align: center;
  display: inline-block;
  text-decoration: none;    
  width:10%;
  opacity: 0.85;
}

#sses50 a:hover, #sses50 a.current
{
/*Hover effect*/
opacity: 1.0; 
background:#005d84;
border-radius:25px 25px 25px 25px;
transition: all 0.2s linear;
}