使用CSS突出显示当前页面

我想使用CSS突出显示当前页面，但不知何故，它不起作用。请看下面我的代码。使用CSS突出显示当前页面

HTML

<body id="home"> 
<div id="mainNav"> 
     <a href="/Dashboard/Index" id="navIndex"> 
      <div class="circle text-uppercase"> 
       <div class="icon23X27"><img src="~/Content/icons/dashBoard.png" width="23px" height="27px" align="middle" /></div><span class="textStyle">Dashboard</span> 
      </div>  
     </a> 

     <a href="/samples/register/" id="navRegister"> 
      <div class="circle text-uppercase"> 
      <div class="icon23X27"><img src="~/Content/icons/samples.png" width="23px" height="27px" align="middle" /></div><span class="textStyle">Sample Registration</span> 
      </div> </a> 

     <a href="/samples/search/"> 
     ......... 
</div>

CSS

body#/samples/register a#navRegister .textStyle { 
    background-color:red !important 
}

来源

2015-09-28 abcid d

你不能使用CSS来做到这一点。您还必须使用客户端/服务器端脚本语言 – Sak90

的语法是错误的。用这样的方式：

body a#navRegister[href="/samples/register"] .textStyle { 
    background-color:red !important 
}

此致是具有div内<a>，这类似于有一瓶一些水，瓶子里面的水没有，这是对一个内部的最糟糕的例子。

来源

2015-09-28 20:33:15

谢谢库马尔！我替换了代码，但不知何故，它仍然无法工作。 –

请给我打电话'Praveen'。你可以给我看一个现场小提琴，以便我们检查它是否不起作用？ –

把你的身体ID，在这种情况下#home和与家庭殿元素的ID结合起来，在这种情况下#navIndex：

#home #navIndex .textStyle { 
    background-color: red; 
}

然后，您可以为您的每个网页上添加一个选择抓在单独的CSS的导航当前页面：

#home #navIndex .textStyle, 
#register #navRegister .textStyle { 
    background-color: red; 
}

删除该!important它只是需要一对夫妇的边缘情况在CSS中，应当避免（我欣赏的那些边缘案件之一，就是想以绝对能让一个选择器显示一些可见的效果，这可能是你正在做的与张贴的CSS）。

您还可以使用类而不是ids作为css选择器。

警告：

它可能更好地使这个在HTML服务器端的服务器可以使用请求的URL来决定哪个导航产品的电流。这样，你可以再补充一个selected-nav-text类到您当前的资产净值跨度和你的CSS变成：

.selected-nav-text { 
    background-color: red; 
}

这是简单的，你可以写逻辑一旦服务器端计算当前的资产净值和CSS使其变亮，然后当你改变你的导航功能时，功能会立即生效。

来源

2015-09-28 21:10:39

嗨Tony Leigh，非常感谢您的帮助！我尝试#home #navIndex .textStyle，风格显示，但是当我添加更多#register navRegister .textStyle时，当我单击“Sample Registration”链接时，它不显示任何内容！我想知道#register在哪里。我关心CSS如何处理当前页面。 –

我错过了一个'＃' - 但是，你最好是阅读和理解，而不是复制和粘贴:-) –

使用CSS突出显示当前页面

回答

相关问题