Html 突出显示当前导航链接_Html_Css

Html 突出显示当前导航链接

html css

Html 突出显示当前导航链接,html,css,Html,Css,我有一个简单的网页导航栏，运行良好。现在我想样式，使当前页面导航链接是一个不同的颜色。在这种情况下，我希望当前页面导航链接使用以下颜色： color: #00A1DB; 我已经设置了一个简化的JSFIDLE，它显示了我当前拥有的：我在Contacts链接中添加了一类“current”，表示这是当前页面。现在我需要修改CSS，以便它将导航栏中“联系人”链接的颜色更改为指定的颜色在过去的几个小时里，我已经对CSS进行了黑客攻击，但是我还不能做出必要的修改来让它正常工作。真的很感激如果有人能告

我有一个简单的网页导航栏，运行良好。现在我想样式，使当前页面导航链接是一个不同的颜色。在这种情况下，我希望当前页面导航链接使用以下颜色：

color: #00A1DB;

我已经设置了一个简化的JSFIDLE，它显示了我当前拥有的：

我在Contacts链接中添加了一类“current”，表示这是当前页面。现在我需要修改CSS，以便它将导航栏中“联系人”链接的颜色更改为指定的颜色

在过去的几个小时里，我已经对CSS进行了黑客攻击，但是我还不能做出必要的修改来让它正常工作。真的很感激如果有人能告诉我如何做到这一点-学习CSS，因为我现在去

谢谢

这就是你想要的吗

基本部分：

改变

.sf-menu li.current {
    color: #00A1DB;
}

到

您可以通过在单击“当前”按钮时为其分配一个类来轻松实现这一点

您可以通过CSS设置类的样式，如下所示：

.current {
     background-color: #eee;
}

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

您需要在服务器端激活li。因此，在绘制菜单时，您应该知道加载了哪个页面，并将其设置为：

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

问题
标签
使用者

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

<!DOCTYPE html>
<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>


.菜单{宽度：300px；高度：25；字体大小：18px；}
.menu li{列表样式：无；浮点：左；右边距：4px；填充：5px；}
.menu li：悬停，.menu li.active{
背景色：#f90；
}

项目1
第2项
项目3
项目4
项目5
项目6

var make_button_active=函数（）
{
//获取项目同级
var sides=（$（this.sides（））；
//删除所有按钮上的活动类
兄弟。每个（函数（索引）
{
$（this.removeClass（'active'）；
}
)
//添加单击的按钮类
$（this.addClass（'active'）；
}
//将事件附加到菜单
$（文件）。准备好了吗(
函数（）
{
$（“.menu li”）。单击（激活按钮）；
}  
)

这里是

您可以使用jquery

.addClass（）

方法将您的

当前

类添加到单击的

li

元素，然后使用

.removeClass

方法删除所有其他

li

元素的

当前

类

$('#nav ul li').on("click",function(){

  $(this).addClass('current');
var siblings =($(this).siblings());


  siblings.each(function (index)
    {
      $(this).removeClass('current');
    });


    });

谢谢你，这正是我想要的。我知道我很接近。非常感谢我放弃了你，我看到了很多不同的系统，你真的工作！我有一个问题，因为我的javascript知识还是初学者。我有ul之外的另一个链接，它是web的徽标。单击此徽标后，您将进入主页。是的，因为它不在ul中，如果我单击#home（logo href），nav的最后一个选定链接将保留为“active”类。所以我想在你的代码中加入一个if和else语句，表示如果点击home，移除ul where.菜单中的活动类。你能告诉我怎么做吗？在home click上调用函数并运行这一行$（“.menu li”）.removeClass（'active'）；

$('#nav ul li').on("click",function(){

  $(this).addClass('current');
var siblings =($(this).siblings());


  siblings.each(function (index)
    {
      $(this).removeClass('current');
    });


    });