2

我正在尝试创建一个小脚本来允许我设置几个菜单项的样式（通过一个带有 li 项的简单 div 完成，其中包含一个将我发送到正确页面的每个）但我没有得到无处可去，所以我需要帮助。

我在母版页上有以下代码：

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="MILLS001_PAINEL.Site1" EnableTheming="True" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Title</title>
<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../js/menu.js"></script>
<link href="../css/reset.css" rel="Stylesheet" type="text/css" />
<link href="../css/style.css" rel="Stylesheet" type="text/css" />
    <!--[if gte IE 9]>
        <style type="text/css">
            .gradient {
                filter: none;
            }
        </style>
    <![endif]-->

<asp:ContentPlaceHolder ID="head" runat="server"></asp:ContentPlaceHolder>
</head>
<body>
<div id="banner" class="gradient">
    <div id="menu">
        <ul>
            <li><a href="painel_gestao.aspx">Painel de Gestão</a></li>
            <li><a href="gestao_operacional.aspx">Cockpit Operacional</a></li>
        </ul>
    </div>
    <div id="logo"></div>
</div>
<div>
    <asp:ContentPlaceHolder ID="Placeholder" runat="server">

    </asp:ContentPlaceHolder>
</div>
</body>
</html>

菜单是在母版页中定义的，现在我有这个脚本来添加某些类（已经在 CSS 中创建）以允许我向菜单项添加/删除样式：

$(document).ready(function () {
    $('menu').find('li').hover(function() {
        $(this).addClass("hovered");
    },
        function() {
            $(this).removeClass("hovered");
    });

    $('menu').find('a').click(function(e) {
        alert(e);
        $(this).parent().addClass("active");
    });
 });

出于某种原因，尽管我没有看到任何错误，但我无法使其正常工作。我在另一个脚本中遇到了问题，在该脚本中我必须使用“[id$=name]”来引用名称，因为母版页名称修改会产生这个问题，但这里似乎并非如此......

谁能帮我看看这里有什么问题？

提前致谢

编辑

让悬停的东西正常工作，但现在我无法让活动类在页面刷新后保持原位（显然，这是 ASP 的默认行为）。

4

2 回答 2

4

你需要做：

$('#menu') <-- note the # sign

在你的选择器中......否则它看起来应该可以正常工作

API 参考：jQuery ID 选择器

要解决您的编辑：

页面加载之间不会自动保留元素状态。浏览器不会寻找“相同的元素”并尝试使其看起来相同。如果您希望菜单保持打开状态，则需要保留一些数据（无论是通过回发数据还是（我建议）一些浏览器端状态保存（例如localStorage））并在菜单代码中手动处理

哦....重读您的问题，我认为它可能比这更简单....

在页面加载时，您可以执行以下操作：

$('[href=' + window.location.path + ']').addClass('active');

可能需要在window.location.path选择器之前进行一些预处理，以处理额外的 url 参数和 href 中路径的变化（例如./index.html和index.html）。但是，请注意属性选择器可用的各种类型的匹配...即*=...可能会使您的 href 匹配更容易...但我不会编写所有代码 =0D

API 参考：jQuery 属性选择器

于 2013-03-06T16:19:22.257 回答
2

您的选择器看起来不正确，看起来您缺少 # 说明它是一个 ID。应该：

  $('#menu').find('a').click()

还有一种稍微不同的方法：

 $('#menu a').click()
于 2013-03-06T16:20:10.577 回答