'How to keep the background of a tab staying in the "selected" color, for a tab linking to a post in Blogger?

In Blogger, there are 2 types of content:

  1. posts
  2. pages

And we can add both post(s) and page(s) to the tabs.

If a tab links to a page, then after being clicked, the background of the tab stays in the "selected" color.

However, if a tab links to a post, then after being clicked, the background of the tab goes back to the "non-selected" color.

How to make the background of the tab stay in the "selected" color in the latter situation?

Many thanks.

tabsblogger


Solution 1:[1]

something like this? Can you elaborate so I can help?

$(document).ready(function(){
  $('ul.menu li').click(function(){
    $('ul.menu li').removeClass("active");
    $(this).addClass("active");
});
});
a { text-decoration: none }
ul.menu {float:right; margin-right:40px}
ul.menu li{float: left; margin:5px; list-style-type:none;}
ul.menu li a{border-radius:8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; color:#666666; font-family: 'Roboto', sans-serif;  font-size:17px; font-weight:700 ;display:block; padding:14px 15px;transition:all .5s;-webkit-transition:all .5s;-moz-transition:all .5s;}
ul.menu li.active a, ul.menu li a:hover{background:#C20106; color: #fff; -webkit-box-shadow: #666 0px 2px 3px; -moz-box-shadow: #666 0px 2px 3px; box-shadow: #666 0px 2px 3px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
    <li class="active"><a href="#">HOMEPAGE</a></li>
    <li><a href="#">CATEGORY 1</a></li>
    <li><a href="#">CATEGORY 2</a></li>
    <li><a href="#">CATEGORY 3</a></li>
    <li><a href="#">CATEGORY 4</a></li>
  </ul>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 therkut

Related Questions