Question

.hi伙计们，我的菜单栏样式有点问题。我有以下代码：

#can_header {
    width:1024px;
    height:140px;
    background-color:#8D96A8;
}
#can_header ul{
    list-style-type:none;
    margin: 0;
    padding: 110px 0 0 550px;
    font-family: adolph;
    text-transform: uppercase;
    font-size: 1em;
}
#can_header li{
    display:inline-block;
    line-height: 15px;
    border-right: 2px solid #CCC;
}
#can_header li#item-104{
    border-right: none; 
}
#can_header ul a:visited{
    color:#CCC;
    text-decoration:none;
    margin-right:15px;
    margin-left:15px;
}
#can_header ul a:link{
    color:#CCC;
    text-decoration:none;
    margin-right:15px;
    margin-left:15px;
}
#can_header ul a:hover{
    color:#EB1886;
}
#can_header ul a:active{
    color:#FFFFFF;
}

我想要做的是当我点击我ul上的其中一个链接时，所选链接的颜色将在链接页面上永久更改。使用我的当前代码，链接的颜色仅在点击时更改..但是当页面更改时，颜色将恢复正常。 TIA！更多力量！

。按照我使用Joomla的方式，我只是编辑我制作的模板的CSS。

Answer 1

我担心只有CSS才能实现你想做的事情。您可以做的是创建一个css类，指示菜单中的项目被选中，并在渲染模板时使用javascript或服务器端将该类分配给li元素

Answer 2

单独使用CSS无法做到这一点，您需要使用Javascript或PHP将一些类添加到所选链接（即class="selected"）。

然后，您可以为类.selected的链接添加样式规则。

Answer 3

他们的权利你不能单独使用CSS。您可以使用：激活并更改文本颜色，或者其他任何内容，同时单击它（也就是onmousedown），但是您不能将其更改为蓝色+单击=红色。

JQuery应该能够帮助你解决这个问题。

Answer 4

这将由您用于显示菜单的菜单模块处理。大多数模块都可以选择打开活动突出显示，这基本上是每个人都在谈论的内容，将CSS类添加到活动菜单项。您需要做的就是打开活动突出显示并添加适当的CSS。

此外，我注意到您正在使用itemID关闭其中一个菜单项中的右边框。你最好使用：lastchild伪装选择器，以防你改变菜单项的顺序或删除你选择的最后一个。

而不是#can_header li#item-104使用#can_header li:last-child

Answer 5

您应该根据请求的页面以编程方式将css类添加到子对象。

php的例子：

function GetFileName()
{
    $currentFile = basename($_SERVER["PHP_SELF"]);
    $parts = Explode('.', $currentFile);
    return $parts[0];
}
$basename = GetFileName();

<li>
    <a href="index.php" <?php if($basename =="index") echo "class='current'"; ?>>Home</a>
</li>
<li>
    <a href="about.php" <?php if($basename =="about") echo "class='current'"; ?>>About</a>
</li>

使用CSS设置样式链接

5 个答案: