我有以下代码:
#main,
#main ul,
#main li,
#main a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
font-weight: normal;
text-decoration: none;
line-height: 1;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
position: relative;
}
#main{
width: 250;
border-right: 1px solid #ececec;
}
#main a {
line-height: 1.3;
}
#main > ul > li {
background: #f7f7f7;
background: -moz-linear-gradient(#f7f7f7 0%, #ececec 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f7f7f7), color-stop(100%, #ececec));
background: -webkit-linear-gradient(#f7f7f7 0%, #ececec 100%);
background: linear-gradient(#f7f7f7 0%, #ececec 100%);
}
#main > ul > li a:hover {
background: #2E779A;
background: -moz-linear-gradient(#2E779A 0%, #2E779A 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2E779A), color-stop(100%, #2E779A));
background: -webkit-linear-gradient(#2E779A 0%, #2E779A 100%);
background: linear-gradient(#2E779A 0%, #2E779A 100%);
color: #ffffff;
}
#main > ul > li > a {
font-size: 14px;
display: block;
color: #2E779A;
border: 1px solid #ececec;
border-top: none;
text-shadow: 0 -1px 1px #ececec;
}
<div id="main">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Sobre nosotros</a></li>
<li><a href="#">Producto</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
我想要的是,选择一个字段时,它会更改颜色以向用户显示在哪个部分。我可以使用CSS执行此操作,还是需要使用jQuery?
仅使用 HTML 和 CSS(没有 JavaScript 或 jQuery)的一种选择是使用
:target
. 伪类表示与页面 URI 的标识符片段(哈希 # 之后的部分)匹配的:target
单个元素。id
因此,例如,如果 URL 是http://mi.pagina.com/index.php#seccion-2
,则将被选择的元素将是带有 的:target
元素id="seccion-2"
。这种方法的优点是易于开发,不需要JavaScript;缺点是旧版本的 IE(8 及以下版本)不支持它,并且如果您使用内部链接(到页面内的锚点)它根本无法正常工作,并且需要进行很多更改......但是如果这不是你的情况,这是一个干净简单的解决方案。
更改上述代码的步骤非常简单:
为菜单中的每个链接添加一个
id
唯一的:使每个链接指向它自己的
id
:定义要突出显示活动菜单的样式。例如,如果您希望它具有红色背景和白色字母:
在这里,您可以看到它的演示:
我在您的示例中添加了样式 和单击
.seleccionado
事件处理程序。然后使用addClass和removeClass产生所需的效果。优点:您不需要修改结构或使用固定 ID。-
缺点:你必须使用jQuery。