Question

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

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

<%@ 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的默认行为）。

Answer 1

你需要这样做：

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

在您的选择器中

....否则它看起来应该可以正常工作

API参考：jQuery ID Selector

解决您的修改问题：

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

哦....重读你的问题我觉得它可能比那更简单......

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

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

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

API参考：jQuery Attribute Selector

Answer 2

你的选择器看起来不正确，看起来你错过了＃，它注意到它是一个ID。应该是：

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

采用略有不同的方法：

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

ASP.NET，Master Pages和jQuery

修改

2 个答案: