Note that there are some explanatory texts on larger screens.

plurals
  1. POASP.NET, Master Pages and jQuery
    text
    copied!<p>I'm trying to create a little script to allow me to set the style of a couple of menu items (done via a simple div with li items, which contain an each to send me to the correct page) but I'm not getting nowhere so I'm in need of help.</p> <p>I have the following code on the master page:</p> <pre><code>&lt;%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="MILLS001_PAINEL.Site1" EnableTheming="True" %&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" &gt; &lt;head runat="server"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;script type="text/javascript" src="../js/jquery-1.8.3.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="../js/menu.js"&gt;&lt;/script&gt; &lt;link href="../css/reset.css" rel="Stylesheet" type="text/css" /&gt; &lt;link href="../css/style.css" rel="Stylesheet" type="text/css" /&gt; &lt;!--[if gte IE 9]&gt; &lt;style type="text/css"&gt; .gradient { filter: none; } &lt;/style&gt; &lt;![endif]--&gt; &lt;asp:ContentPlaceHolder ID="head" runat="server"&gt;&lt;/asp:ContentPlaceHolder&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="banner" class="gradient"&gt; &lt;div id="menu"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="painel_gestao.aspx"&gt;Painel de Gestão&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="gestao_operacional.aspx"&gt;Cockpit Operacional&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="logo"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div&gt; &lt;asp:ContentPlaceHolder ID="Placeholder" runat="server"&gt; &lt;/asp:ContentPlaceHolder&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>The menu is defined in the master page, now I have this script to add certain classes (already created in CSS) to allow me to add/remove styles to the menu items:</p> <pre><code>$(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"); }); }); </code></pre> <p>For some reason, I can't make this to work although I do not see any errors. I had a problem with another script in which I had to reference names by using '[id$=name]', because Master page name mangling creates that problem, but it doesn't seem to be the case here...</p> <p>Could anyone help me see what is wrong here?</p> <p>Thanks in advance</p> <h3>EDIT</h3> <p>Got the hover thing working, but now I can't make to seem the active class to stay in place after the page refresh (apparently, a default behaviour of ASP).</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload