Question

我有一个非常简单的导航栏/菜单，几乎没有将用户链接到其他页面的单词。我的菜单包含在php库的每个页面中，如下所示：

echo <<<_END
<div id="header">
        <div id="menu">
                <ul>
                <li><a href="$doc_root/index.php" title="HOME">home</a></li>
                <li><a href="$doc_root/travel/grid.php" title="My Trips">travelling</a></li>
                <li><a href="#">images</a></li>
                <li><a href="#">travel info</a></li>
                </ul>
        </div>                
</div>
_END;

我的menu.css说：

#header{ width:100%; height:40px; background-color: black; border-bottom: 1px silver solid;}
#menu ul {

    list-style: none;
    margin:4px;
    padding:0;
    text-align:center;
}

#menu ul li {
    display:inline;
          }

#menu ul li a {
  color: silver;
  font: 20px "Comic Sans MS", cursive;
  margin-left: 100px;
  margin-right: 100px;
  text-align: center;
  text-decoration: none;  
        }
#menu ul li a:hover, #menu ul li  a.active {
  background-color: white;
}

问题是：我希望点击菜单链接，让我们说，从主页“旅行”，菜单背景将改变“旅行”页面上的颜色。我想jquery函数可能是这样的：

$(document).ready(function() {
    changeMenu();

});
function changeMenu() {
$('???').click(function(){
$('#header').css('background-color' , '#06F');
}
)};

真的我不知道如何更换“???”有一些工作的部分。我尝试了$（'#menu ul li a'）等等......没有任何反应。当然问题甚至是其他问题。请帮忙，谢谢。摩根

Answer 1

您是否需要将changeMenu作为函数调用？它没有。

$(document).ready(function() {
    $('#menu a').click(function(){
        $('#header').css('background-color' , '#06F');
    }
});

修改

哦，没有看到你正在改变页面。为了工作，您甚至不需要JavaScript - 它们都是用HTML和CSS处理的。简而言之，您将为HTML页面提供一个id并相应地修改CSS。例如：

<body id="page1">
   [ ... ]
   <div id="header">
       [ ... ]


#header{
    background: #fff;
}
#page1 #header{
    background: #o6f;
}

单击新页面时更改菜单颜色

1 个答案: