1

我有一个非常简单的导航栏/菜单，用几句话将用户链接到其他页面。我的菜单包含在 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') 和其他东西......没有任何反应。当然，问题甚至是其他问题。请帮忙，谢谢。摩根

4

1 回答 1

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;
}
于 2013-06-17T19:30:16.980 回答