Question

我有一个菜单。

＆＃13;

#menu {
  background: red;
}
.menu-option {} .menu-option:hover {
  background: maroon;
}
.menu-option:active {
  background: black;
}

＆＃13;

<div id="menu" align="center">
  <div class="menu-option" align="center" onclick="showgenre(1)">Literary</div>
  <div class="menu-option" align="center" onclick="showgenre(2)">FilmFest</div>
  <div class="menu-option" align="center" onclick="showgenre(3)">Dance</div>
  <div class="menu-option" align="center" onclick="showgenre(4)">Music</div>
  <div class="menu-option" align="center" onclick="showgenre(5)">Fine Arts</div>
  <div class="menu-option" align="center" onclick="showgenre(6)">Quiz</div>
  <div class="menu-option" align="center" onclick="showgenre(7)">Dramatics</div>
</div>

＆＃13;

现在我想要的是，当我点击任何菜单选项时，特定background的{{1}}应永久成为menu-option，直到点击任何其他选项为止{{1} }}

我如何实现同样的目标？ CSS首选。

Answer 1

CSS解决方案是将tabindex添加到元素中以使它们获得焦点，然后在焦点上设置颜色。

#menu {
  background: red;
}
.menu-option:hover,
.menu-option:focus {
  background: maroon;
  outline:none;
}

<div id="menu" align="center">
  <div class="menu-option" align="center" onclick="showgenre(1)" tabindex="-1">Literary</div>
  <div class="menu-option" align="center" onclick="showgenre(2)" tabindex="-1">FilmFest</div>
  <div class="menu-option" align="center" onclick="showgenre(3)" tabindex="-1">Dance</div>
  <div class="menu-option" align="center" onclick="showgenre(4)" tabindex="-1">Music</div>
  <div class="menu-option" align="center" onclick="showgenre(5)" tabindex="-1">Fine Arts</div>
  <div class="menu-option" align="center" onclick="showgenre(6)" tabindex="-1">Quiz</div>
  <div class="menu-option" align="center" onclick="showgenre(7)" tabindex="-1">Dramatics</div>
</div>

这里的问题是，如果焦点丢失，颜色也会消失，所以相反，有些JS是必要的。使用JS，您只需设置类

即可

$(function() { // execute after the elements are ready 
               // this is also a short form for $(document).ready(function(){
  $('.menu-option').click(function() {
    $(this).addClass('maroon').siblings().removeClass('maroon');
  });
});

#menu {
  background: red;
}
.menu-option:hover,
.menu-option.maroon {
  background: maroon;
  outline: none;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="menu" align="center">
  <div class="menu-option" align="center" onclick="showgenre(1)">Literary</div>
  <div class="menu-option" align="center" onclick="showgenre(2)">FilmFest</div>
  <div class="menu-option" align="center" onclick="showgenre(3)">Dance</div>
  <div class="menu-option" align="center" onclick="showgenre(4)">Music</div>
  <div class="menu-option" align="center" onclick="showgenre(5)">Fine Arts</div>
  <div class="menu-option" align="center" onclick="showgenre(6)">Quiz</div>
  <div class="menu-option" align="center" onclick="showgenre(7)">Dramatics</div>
</div>

为了使脚本正确执行，必须首先加载元素。这意味着您可以将脚本放在文档的头部，但是您必须设置一个就绪处理程序来等待元素。或者，您可以在元素加载到身体末端附近后将其放置。

单击菜单选项后冻结悬停onclick

1 个答案: