Question

我想在点击时更改所选语言的颜色，下面是我的代码：

$(document).ready(function(){
    $("a[href*='lang']").click(function(e) {
        e.preventDefault();
        $('#header-top a').removeClass('active');
        $(this).addClass('active');
    }); 
});

JSP代码：

<div id="header-top">
    <a href="/eidsar" title="Logo"> 
        <img class="logo" src="/eidsar/images/MobistarLogo.jpg" />
    </a>
    <ul class="lang-nav">
        <li><a class="active" href="?lang=en" title="en">EN</a></li>
        <li><a href="?lang=fr" title="fr">FR</a></li>
        <li><a href="?lang=nl" title="nl">NL</a></li>
    </ul>
</div>

CSS：

.lang-nav {
    padding: 0;
    list-style: none;
    margin-left: 1100px;
    line-height: 42px;
}

.lang-nav li {
    display: inline;
    margin: 0 5px;
}

.lang-nav li a {
    color: #999999;
    text-decoration: none;
}

.lang-nav li a:hover {
    color: #fff
}

.active {
    color: #fff;
}

但是当我使用e.preventDefault();时，它阻止我转到?lang=en链接，我该如何实现这一目标？请帮忙。

我添加了使用onload函数：

<script>
function checkUrl(){
     var title = document.getElementById("nl").title;
     alert(title);
       if(title == "en"){
         document.getElementById("en").href = '?lang=en';
         document.getElementById("en").style.color = 'red';
         document.getElementById("fr").style.color = 'blue';
         document.getElementById("nl").style.color = 'green';
     }
        if(title == "fr"){
             document.getElementById("en").style.color = '#999999';
             document.getElementById("fr").style.color = 'red';
             document.getElementById("nl").style.color = '#999999';
             document.getElementById("fr").href = '?lang=fr';
         } if(title == "nl"){
             document.getElementById("en").style.color = '#999999';
             document.getElementById("fr").style.color = '#999999';
             document.getElementById("nl").style.color = 'red';
             document.getElementById("nl").href = '?lang=nl';
         }   
}
</script>
</head>
<body onload="checkUrl()" >
    <div>
        <div id="header-top">
            <a href="/eidsar" title="Logo"> <img class="logo"
                src="/eidsar/images/MobistarLogo.jpg" />
            </a>
            <ul class="lang-nav">
                <li><a id="en" href="?lang=en" title="en">EN</a></li>
                <li><a id="fr" href="?lang=fr" title="fr">FR</a></li>
                <li><a id="nl" href="?lang=nl" title="nl">NL</a></li>
            </ul>
        </div>
        <div id="header-bottom">
            <div style="visibility: hidden" id="header-content">
                <ul class="head-nav"></ul>
            </div>
        </div>
    </div>

但现在问题是如何在onload ???中传递id

Answer 1

单击它后，您不需要JQuery更改href颜色。试试这些CSS标签：

/* unvisited link */
a:link {
    color: #FF0000;
}

/* visited link */
a:visited {
    color: #00FF00;
}

/* mouse over link */
a:hover {
    color: #FF00FF;
}

/* selected link */
a:active {
    color: #0000FF;
}

注意：a:hover必须在CSS定义中a:link和a:visited之后才能生效！ a:active必须在CSS定义中a:hover之后才能生效！ Pseudo-class名称不区分大小写。

http://www.w3schools.com/css/css_pseudo_classes.asp

Answer 2

我猜您使用的是每种语言的单独页面。在这种情况下，您可以根据页面保留已经着色的语言特定链接。您可以使用这样的类：.header-top a.inuse { color: #999999;}并将类“inuse”分配给页面特定的锚标记，仅突出显示该特定页面上的链接。

Answer 3

这里的问题是当页面退出时，它会擦除所有内容。您需要做的是当页面加载时，您必须检查该URL是否与任何链接匹配并设置类/颜色。因此，在您的情况下执行任何操作都是无用的，因为您希望页面导航。

通常，开发人员会通过服务器端代码在链接上设置一个类，JavaScript不会担心它。

如何使用Jquery更改单击时的href颜色

JSP代码：

CSS：

3 个答案: