Javascript 如何使用Jquery在单击时更改href颜色_Javascript_Jquery_Html_Css

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

javascript jquery html css

Javascript 如何使用Jquery在单击时更改href颜色,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我想更改单击时高亮显示的所选语言的颜色，下面是我的代码： $(document).ready(function(){ $("a[href*='lang']").click(function(e) { e.preventDefault(); $('#header-top a').removeClass('active'); $(this).addClass('active'); }); }); JSP代码：但是当我使用e.pre

我想更改单击时高亮显示的所选语言的颜色，下面是我的代码：

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

JSP代码：但是当我使用

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>


函数checkUrl（）{
var title=document.getElementById（“nl”）.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'；
}
如果（标题=“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'；
}如果（标题=“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'；
}   
}

但是现在的问题是如何在onload中传递ID？？？

您不需要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:visted

之后才能生效<代码>a:active必须位于CSS定义中的

a:hover

之后才能生效<代码>伪类名称不区分大小写

我想您对每种语言都使用了单独的页面。在这种情况下，您可以根据页面保留已着色的特定于语言的链接。您可以使用这样的类：


.header-top a.inuse{color:#999999；}

并将类“inuse”分配给页面特定的锚定标记，以便仅突出显示该特定页面上的链接。

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

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

如果它转到该链接，您的窗口将重新加载，并且颜色更改将丢失。您是否仅尝试在标题中为锚定添加颜色，或者您想在ul标记中为相应的锚定标记添加颜色？您是否也正在加载单击相应链接时，为每个lang创建单独的模板。如果是这样的话，你也能把它贴出来吗。只是想知道，你在使用页面的多少部分，以及它是如何集成的。在导航到？lang=en之后，我需要我的链接颜色保持不变，直到选择了下一种语言，因为这在Header中出现。这有什么帮助？在导航后加载页面时，它不会设置当前链接的文本颜色。我猜他停留在一个页面上，那么访问的页面应该适合他。如果他导航到不同的页面，他可以向链接添加类，并让这些类控制样式。我只是想提供帮助和选择，不需要否决投票。你能告诉我怎么做吗？我遵循你的方法，但是如何在页面加载时传递不同的ID，我已经更改了代码。我已经添加了代码请点击。。。

<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>

/* 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;
}