0

我正在制作一个具有 master > submaster > page.aspx 的网站，我希望如果任何用户单击导航栏中的链接，它会更改该特定链接的颜色以及更改背景颜色，我的导航位于 submaster 页面中，我使用过 jquery 但它不起作用，在页面加载时它消失了。

$(document).ready(function () {
    $('#HomeLink').click(function () {
        $('#HomeLink').css("background-color","white");
        $('#HomeLink').css("color","#00AEEC");
    });
});

<div id="UpperMenu">
                <h2><a href="#">Horizon</a></h2>
                <ul>
                    <li><a href="Home.aspx"><div id="HomeLink"><span class="NavLink">Home</span></div></a></li>
                    <li><a href="#"><div id="NewLink"><span class="NavLink">New</span></div></a></li>
                    <li><a href="#"><div id="LookupLink"><span class="NavLink">Lookup</span></div></a></li>
                    <li><a href="Reports.aspx"><div id="ReportLink"><span class="NavLink">Report</span></div></a></li>
                    <li><a href="#"><div id="ManageLink"><span class="NavLink">Manage</span></div></a></li>
                    <li><a href="#"><div id="UtilitiesLink"><span class="NavLink">Utilities</span></div></a></li>
                </ul>
            </div>
4

3 回答 3

0

而不是有两个引用#homelink 试试这个

$(document).ready(function () {
$('#HomeLink').click(function () {
    $('#HomeLink').css({
                    background-color : '#FFF',
                    color : '#00AEEC'
     });  
});

您应该能够一次性运行它，而不是运行两次。

于 2012-12-20T10:03:07.243 回答
0

也许 HomeLink 的颜色被其他 css 属性覆盖，你能在这里显示你的 html 和 css 代码吗？

于 2012-12-20T09:54:30.953 回答
0

您的代码中的一切看起来都很好，但您可以通过这种方式简化：

在您的编辑中，我刚刚看到了您的 html div has <span>，these are the children of <a>因此您可以做两件事：

  1. 更改 a 的文本颜色

  2. 更改跨度的背景

    $('#HomeLink').click(function() {
   $(".NavLink",this).css("background-color", "red");
   $(this).closest('a').css("color", "white");
});

并make sure you have a reference to the jQuery plugin在此脚本的顶部。

你可以在这里测试它：http: //jsfiddle.net/5WSuv/1/

于 2012-12-20T10:00:21.173 回答