如何使整个菜单栏项区域可单击

Question

我正在使用菜单栏控件。 这是我的CSS和设计代码：

.css：

.Menu 
{ 
    background:transparent url(../images/blueslate_background.gif) repeat-x;
    text-align:center;
    font-family : "lucida grande", tahoma, verdana, arial, sans-serif;
    font-size:12px;
    font-weight:bold;
    border: None 0px #fff !important;
}
.menuhover
{
     color:#fff;
     background:transparent url(../images/blueslate_backgroundOVER.gif) repeat-x left center;
     cursor:pointer;
}

设计：

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="MenuControl.ascx.cs" Inherits="MenuControl" %>
<link rel="stylesheet" href="css/Menu3.css" type="text/css" />
<div id="header" align="center" >
<table width="100%" cellpadding ="0" cellspacing ="0" align="center">
<tr>
<td align="center">
   <asp:Menu ID="Menu1" runat="server" Orientation ="Horizontal"  CssClass="Menu"
        ForeColor ="Black" Width="100%" ScrollDownText="">
     <StaticMenuItemStyle Height ="40px"/>
    <DynamicMenuItemStyle CssClass ="Menu" Height="30px" HorizontalPadding="10px"/>
    <dynamichoverstyle  CssClass ="menuhover"/>
    <StaticHoverStyle CssClass ="menuhover"/>
    </asp:Menu>
</td>
</tr>
</table>
</div>

我只想让整个菜单栏列表项区域可点击，是否可以使用 jquery 或 JavaScript。

------------------------------------更新-----------------------------------------------------

这里有一些使用jQuery使整个div可点击的示例：

<script type="text/javascript" language="javascript">
$(document).ready(function(){                 
     $(".thumb").click(function(){
     window.location=$(this).find("a").attr("href");return false;
     });
});
</script>

------------------------------------更新-----------------------------------------------------

溶液：

    <script type="text/javascript" language="javascript">
$(document).ready(function() {                 
     $(".Menu").click(function(e) {
         window.location = $(e.target).find("a").attr("href");
         return false;
     });
});
</script>

单击原始菜单文本时出错错误：

Server Error in '/EasyWeb' Application.
The resource cannot be found.
Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable.  Please review the following URL and make sure that it is spelled correctly. 
Requested URL: /EasyWeb/undefined
Version Information: Microsoft .NET Framework Version:2.0.50727.3053; ASP.NET Version:2.0.50727.3053

Answer 1

也许您想检查是否单击了"header"，然后检查单击了哪个元素。

在这种情况下，您必须检查，例如使用JQuery：

$('#header').on('click', function(e) {
    var what = $(e.target).html();
    $('#clicked').html("You have selected: " + what);
});

看看这个 DEMO.
或者这个，更好。

编辑

要检查元素中的 href，请查看此处。

编辑2

$(document).ready(function() {                 
     $(".Menu").click(function(e) {
         window.location = $(e.target).find("a").attr("href");
         return false;
     });
});

Answer 2

您可以使用 .菜单类。

$(document).on("click", ".Menu", function(){
  alert("Menu clicked");
})