html – 如何动态地更改网页所选菜单项的颜色？

发布时间：2020-12-14 22:24:26 所属栏目：资源来源：网络整理

导读：我是开发网页的新手。我正在寻找类似于stackoverflow.com的菜单(如上面显示的问题，标签，用户)。如何更改所选菜单的颜色(例如，“点击”时问题的背景颜色将变为橙色)？我设法改变颜色，而使用CSS()，因为这很简单，但我遇到麻烦。只能使用CSS来改变点击的

我是开发网页的新手。我正在寻找类似于stackoverflow.com的菜单(如上面显示的问题，标签，用户)。如何更改所选菜单的颜色(例如，“点击”时问题的背景颜色将变为橙色)？

我设法改变颜色，而使用CSS()，因为这很简单，但我遇到麻烦。

只能使用CSS来改变点击的项目的颜色吗？

解决方法

设置类活动和悬停的样式：

比起你需要让li活跃，在服务器端。
所以当您绘制菜单时，您应该知道哪个页面被加载并设置为：

<li class="active">Question</li>
 <li>Tags</li>
 <li>Users</li>

但是，如果您正在更改内容而不重新加载，则无法更改在服务器上设置活动的li元素，则需要使用javascript：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<style>
  .menu{width: 300px; height: 25; font-size: 18px;}
  .menu li{list-style: none; float: left; margin-right: 4px; padding: 5px;}
  .menu li:hover,.menu li.active {
        background-color: #f90;
    }
</style>
</head>
<body>

<ul class="menu">
<li>Item 1</li>
<li class="active">Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>

<script type="text/javascript">

var make_button_active = function()
{
  //Get item siblings
  var siblings =($(this).siblings());

  //Remove active class on all buttons
  siblings.each(function (index)
    {
      $(this).removeClass('active');
    }
  )


  //Add the clicked button class
  $(this).addClass('active');
}

//Attach events to menu
$(document).ready(
  function()
  {
    $(".menu li").click(make_button_active);
  }  
)

</script>
</body>

</html>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!