Question

我正在建立一个网站 master＆gt; submaster＆gt; page.aspx 我希望如果任何用户点击导航栏中的链接，它会更改该特定链接的颜色以及更改背景的颜色，我的导航在子主页中，我已经使用了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>

Answer 1

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

Answer 2

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

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

更改a

更改范围的背景

$('#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/

Answer 3

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

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

你应该能够在镜头中运行而不是两次运行它。

jquery导航活动更改颜色和背景颜色不起作用

3 个答案: