изменить цвет выбранной вкладки меню

Question

Я взял этот фрагмент из другого вопроса:

<script type='text/javascript' >
$(document).ready(function () {
 $("div.content ul li a")
 .mouseover(function () {
  var t = $(this);
  if (!t.hasClass("clicked")) {  // very easy to check if element has a set of styles
   t.addClass('mouseover');
  }
 })
 .mouseout(function () {  // attach event here instead of inside mouse over
  $(this).removeClass('mouseover');
 });

 $("div.content ul li a").click(function () {
  var t = $(this);
  t.toggleClass("clicked");
  if (t.hasClass("clicked")) {
   t.removeClass('mouseover');
  } else {
   t.addClass('mouseover');
  }
 });
});
</script>

Последнее, что я хотел, это восстановить обычные css-вкладки при нажатии на другую вкладку. Например, bgcolors вкладки белые, когда я нажимаю tab1, они становятся черными, когда я вхожу в Tab2..Tab1 становится белым, а Tab2 становится черным

<ul> 
 <li>
  <a href="#Tab1">Tab 1</a>
 </li>
 <li>
  <a href="#Tab2">Tab 2</a>
 </li>
</ul> 

скажем, вот часть CSS

ul li a {background-color: white;}
ul li a.mouseover {background-color: black;}
ul li a.mouseout {background-olor: white;}
ul li a.clicked {background-color: black;}

Answer 1

Вы можете значительно упростить свой Javascript для этого.Это должно достичь желаемого эффекта.

<script type="text/javascript">
    $(document).ready(function() {
        $("div.content ul li a")
         .mouseover(function() {
             $(this).addClass('mouseover');
         })
         .mouseout(function() {
             $(this).removeClass('mouseover');
         });

        $("div.content ul li a").click(function(e) {
            e.preventDefault(); //prevent the link from actually navigating somewhere
            $(this).toggleClass("clicked");
            $("div.content ul li a").not(this).removeClass("clicked"); //remove the clicked class from all other elements
        });
    });
</script>

Javascript здесь будет делать следующее:

• Добавить класс "mouseover" при наведении на ссылку
• Удалите класс «mouseover», когда вы больше не наводите ссылку
• Когда вы щелкаете ссылку, она переключает класс «clicked» и удаляет его из любой другой ссылки, которая могла иметь класс - это восстановитостальные ваши вкладки в «нормальном» состоянии.

Answer 2

@ wsanville

Как насчет проблемы двойного щелчка по той же вкладке?

Если я удаляю нижнюю границу с вкладки (указывая выбранную) при нажатии на вкладку, это нормально. Но когда я нажимаю на него снова, он должен просто оставаться таким (без нижней границы), но из-за переключения теперь похоже, что вы не выбрали вкладку, но вы все еще там.

Answer 3

С помощью CSS можно достичь того, что вы ищете:

ul li a {background-color: white;}
ul li a:hover {background-color: black;}
ul li a:focus {background-color: black;}

Демо