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

前端之家收集整理的这篇文章主要介绍了html – 如何动态地更改网页所选菜单项的颜色?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我是开发网页的新手。我正在寻找类似于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>

猜你在找的HTML相关文章