javascript - 如何使整个菜单栏元素区域可点击

Question

我正在使用菜单栏控件。这是我的 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 .
或者 this one , 更好看。

编辑

要同时检查元素中的 href，请查看 here .

编辑2

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