ASP.NET、母版页和 jQuery答案

【问题标题】：ASP.NET, Master Pages and jQueryASP.NET、母版页和 jQuery
【发布时间】：2013-03-07 00:35:27
【问题描述】：

我正在尝试创建一个小脚本，以允许我设置几个菜单项的样式（通过带有 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 的默认行为）。

【问题讨论】：

我认为您的主要目标是将 li 的类更改为在导航上处于活动状态。由于您使用 asp.net，您可以参考此链接来实现您的目标。但它在 c# 中。 stackoverflow.com/questions/15244240/…
希望它能解决您的问题。因为我是从手机浏览的。我无法在您的线程本身中给出这些步骤。 :)

标签： javascript jquery asp.net master-pages

【解决方案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

【讨论】：

是的，这就是问题所在，现在我觉得自己像一扇门一样笨哈哈（'-_-）
@Zed_Blade：别担心，有时你只需要另一双眼睛……我也对自己做过同样的事情；）
我看过，我认为你是对的。我不需要你写我的代码，我只是 asp 和 jquery 的新手 :)
@Zed_Blade：我不认为你是，我只是为你提供了很多如何处理它的选项，虽然我喜欢编写示例代码，但它会开始变得很长：D

【解决方案2】：

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

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

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

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

【讨论】：

您好，感谢您的回答。如果您能提供帮助，我已经编辑了我的问题以反映我的新问题:)