Question

所以问题是，当我第一次访问我的网站时，这3个链接是蓝色的，点击其中任何一个后，它们会变成橙色，最后点击的链接会保持更暗/红色以进行导航。当你不仅在点击任何链接后进入页面时，我希望它默认为橙色。

 <ul class="nav" >
    <li><a href="champions.php">Champions</a></li>
    <li><a href="items.php">Items</a></li>
    <li><a href="changes.php">Changes</a></li>
    </ul>

css part：

.nav {
    float: right;
    margin: 0;
    padding: 0;
    list-style: none;

    }

.nav li:hover{
    background: #cccccc;
}
.nav li{

    background: a0a0a0;
    padding: 2px;
    display:inline-block;
    margin-right: 5px;
  position: relative;
  box-shadow: 
    1px 1px #cccccc,
    2px 2px #cccccc,
    3px 3px #cccccc;
  transition: all 0.1s ease-in;

}
.nav li:active{

box-shadow: none;
  top: 3px;
  left: 3px;
}
.nav li a{

    text-decoration: none;
    }   
.nav li a:hover{ color:orange; }

和jquery

$(document).ready(function() {

    var hash = window.location.hash.substr(1);
    var href = $('.nav li a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-4)){
            var toLoad = hash+'.php #content';
            $('#content').load(toLoad)
        }                                           
    });

    $('.nav li a').click(function(){

        var toLoad = $(this).attr('href')+' #content';
        $('#content').hide('fast',loadContent);
        $('#load').remove();

        $('#load').fadeIn('normal');
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-4);
        function loadContent() {
            $('#content').load(toLoad,'',showNewContent())
        }
        function showNewContent() {
            $('#content').show('normal',hideLoader());
        }
        function hideLoader() {
            $('#load').fadeOut('normal');
        }

        $('.nav li a').addClass("undnone");
        $(this).removeClass("undnone").addClass("und");
        return false;


    });

});

多一点css（来自jquery）

.und
{
    color: red;
    text-decoration: none;`
`}
.undnone{
    color: #fc7425;
    text-decoration: none;
}

Answer 1

更改

.nav li a{

text-decoration: none;
}

到

.nav li a{

text-decoration: none;
color:orange;
}

这是example

Answer 2

您想要的只是默认情况下要着色的链接元素，然后您必须移动属性

color:orange;

这

.nav li a: hover { }

到

.nav li a { }

所以，你的班级应该是：

.nav li a {
    text-decoration: none;
    color:orange;
}

你可以在这里看到 - ＆gt; http://jsfiddle.net/79sZL/

<强>更新：

如果您希望链接保持活跃状态＆＃39;一旦点击并保持这样，直到另一个链接被点击（将其视为＆＃39;非活动＆＃39;）然后您可以使用jQuery执行此操作：

$(document).ready(function () {
    $('.nav li a').click(function (event) {
        $('.nav li a').removeClass('red');
        $(event.target).addClass("red"); 
    });
});

看到这个 - ＆gt; http://jsfiddle.net/79sZL/2/

希望这有帮助!!!

Answer 3

也许我还没有完全理解这个问题，但是如果你不想要蓝色链接，而是想要橙色，只需将a颜色设置为橙色，如下所示：< / p>

.nav li a {
color: orange;
text-decoration: none;
}

要使jQuery覆盖橙色，请将.und的css更改为：

.und {
color: red!important;
}

更改导航菜单链接的颜色

3 个答案: