使一个div可点击和一个JavaScript以运行一些不同的链接

Question

我在页面上的菜单有以下代码

<td width="200" valign="top" align="left" bgcolor="#ffffff">
    <div id="stemenu">
        <div id="mbuttonon">
            <a class="mwink" href="index.html">Home</a>
        </div>
        <table cellspacing="0" cellpadding="0" width="100%" align="center">
            <tr>
                <td width="100%" height="6"></td>
            </tr>
        </table>
        <div id="mbutton">
            <a class="mwink" href="index.html">About us</a>
        </div>
        <table cellspacing="0" cellpadding="0" width="100%" align="center">
            <tr>
                <td width="100%" height="6"></td>
            </tr>
        </table>
        <div id="mbutton">
            <a class="mwink" href="index.html">FAQs</a>
        </div>
        <table cellspacing="0" cellpadding="0" width="100%" align="center">
            <tr>
                <td width="100%" height="6"></td>
            </tr>
        </table>
        <div id="mbutton">
            <div id="plus">
                <a href="javascript:animatedcollapse.toggle('aa')"><img src="images/plus.gif"></a>
            </div>
            <a class="mwink" href="index.html">Conditions we treat</a>
        </div>
        <div id="aa" style="width: 160px; display:none;">
            <ul>
                <li>
                    <a class="mlink" href="#">MSK</a>
                    <li>
                        <a class="mlink" href="#">Neurological</a>
                        <li>
                            <a class="mlink" href="#">Paediatrics</a>
                            <li>
                                <a class="mlink" href="#">Surgery</a>
            </ul>
        </div>
        <table cellspacing="0" cellpadding="0" width="100%" align="center">
            <tr>
                <td width="100%" height="6"></td>
            </tr>
        </table>
        <div id="mbutton">
            <a class="mwink" href="index.html">Our clinics</a>
        </div>
        <table cellspacing="0" cellpadding="0" width="100%" align="center">
            <tr>
                <td width="100%" height="6"></td>
            </tr>
        </table>
        <div id="mbutton">
            <div id="plus">
                <a href="javascript:animatedcollapse.toggle('ab')"><img src="images/plus.gif"></a>
            </div>
            <a class="mwink" href="index.html">Services</a>
        </div>
        <div id="ab" style="width: 160px; display:none;">
            <ul>
                <li>
                    <a class="mlink" href="#">Clinic Appointments</a>
                    <li>
                        <a class="mlink" href="#">Gym rehabilitation</a>
                        <li>
                            <a class="mlink" href="#">Home visits</a>
                            <li>
                                <a class="mlink" href="#">Hydrotherapy</a>
                                <li>
                                    <a class="mlink" href="#">Musculoskeletal physiotherapy</a>
                                    <li>
                                        <a class="mlink" href="#">Neurological physiotherapy</a>
                                        <li>
                                            <a class="mlink" href="#">Paediatric physiotherapy</a>
            </ul>
        </div>
        <table cellspacing="0" cellpadding="0" width="100%" align="center">
            <tr>
                <td width="100%" height="6"></td>
            </tr>
        </table>
        <div id="mbutton">
            <div id="plus">
                <a href="javascript:animatedcollapse.toggle('ac')"><img src="images/plus.gif"></a>
            </div>
            <a class="mwink" href="index.html">Treatments</a>
        </div>
        <div id="ac" style="width: 160px; display:none;">
            <ul>
                <li>
                    <a class="mlink" href="#">Acupuncture</a>
                    <li>
                        <a class="mlink" href="#">Electrotherapy</a>
                        <li>
                            <a class="mlink" href="#">Gait Ax</a>
                            <li>
                                <a class="mlink" href="#">Hydrotherapy</a>
                                <li>
                                    <a class="mlink" href="#">Manipulation</a>
                                    <li>
                                        <a class="mlink" href="#">Massage</a>
                                        <li>
                                            <a class="mlink" href="#">Neurological rehabilitation</a>
                                            <li>
                                                <a class="mlink" href="#">Orthotics</a>
                                                <li>
                                                    <a class="mlink" href="#">Paediatric physio</a>
                                                    <li>
                                                        <a class="mlink" href="#">Pain management</a>
                                                        <li>
                                                            <a class="mlink" href="#">Physiotherapy</a>
                                                            <li>
                                                                <a class="mlink" href="#">Respiratory treatment</a>
            </ul>
        </div>
        <table cellspacing="0" cellpadding="0" width="100%" align="center">
            <tr>
                <td width="100%" height="6"></td>
            </tr>
        </table>
        <div id="mbutton">
            <a class="mwink" href="index.html">Contact us</a>
        </div>
        <table cellspacing="0" cellpadding="0" width="100%" align="center">
            <tr>
                <td width="100%" height="0"></td>
            </tr>
        </table>
    </div>
    <br>
    <br>
</td>

点击加号按钮打开子菜单，

我的问题是，如何使完整的div成为锚链接（单击mbutton div的任何部分，它都应跟随该链接）当单击加号按钮时，应打开子菜单。

基本上，我想使所有部分都可单击，而不仅是文本（例如，主页，关于我们），而加号按钮也应打开子菜单...

有人可以指导我吗？ 目前，我要么只能使锚文本可点击，要么我无法打开javascript子菜单...

我可以在CSS中做吗？

Answer 1

display:block是方法。

#plus a { display:block }

Answer 2

首先，您为多个元素输入了相同的ID，这是错误的。 为每个元素分配uniqpe ID名称。
尝试这个 ：

<td width="200" valign="top" align="left" bgcolor="#ffffff">
 <div id="stemenu">
 <div id="mbuttonon"><a class="mwink" href="index.html">Home</a></div>

<table cellspacing="0" cellpadding="0" width="100%" align="center"><tr><td width="100%" height="6"></td></tr></table>
<div id="mbutton"><a class="mwink" href="index.html">About us</a></div>
<table cellspacing="0" cellpadding="0" width="100%" align="center"><tr><td width="100%" height="6"></td></tr></table>
<div id="mbutton"><a class="mwink" href="index.html">FAQs</a></div>
<table cellspacing="0" cellpadding="0" width="100%" align="center"><tr><td width="100%" height="6"></td></tr></table>
<div id="mbutton"><div id="plus"  class='plus'><a href="#"><img src="images/plus.gif">   </a></div> <a class="mwink" href="index.html">Conditions we treat</a></div> 
<div id="aa" style="width: 160px; display:none;">
<ul><li><a class="mlink" href="#">MSK</a>
<li><a class="mlink" href="#">Neurological</a>
<li><a class="mlink" href="#">Paediatrics</a>
<li><a class="mlink" href="#">Surgery</a>
</ul></div>

<table cellspacing="0" cellpadding="0" width="100%" align="center"><tr><td width="100%" height="6"></td></tr></table>
<div id="mbutton"><a class="mwink" href="index.html">Our clinics</a></div>
<table cellspacing="0" cellpadding="0" width="100%" align="center"><tr><td width="100%" height="6"></td></tr></table>
<div id="mbutton"><div id="plus" class='plus'><a href="#"><img src="images/plus.gif">    </a></div> <a class="mwink" href="index.html">Services</a></div> 
<div id="ab" style="width: 160px; display:none;">
<ul>
 <li><a class="mlink" href="#">Clinic Appointments</a>
 <li><a class="mlink" href="#">Gym rehabilitation</a>
 <li><a class="mlink" href="#">Home visits</a>
 <li><a class="mlink" href="#">Hydrotherapy</a>
 <li><a class="mlink" href="#">Musculoskeletal physiotherapy</a>
 <li><a class="mlink" href="#">Neurological physiotherapy</a>
 <li><a class="mlink" href="#">Paediatric physiotherapy</a>
 </ul></div>

 <table cellspacing="0" cellpadding="0" width="100%" align="center"><tr><td  width="100%" height="6"></td></tr></table>

 <div id="mbutton"><div id="plus"  class='plus'><a href="#"><img src="images/plus.gif"></a></div> <a class="mwink" href="index.html">Treatments</a></div> 
 <div id="ac" style="width: 160px; display:none;">
 <ul>
 <li><a class="mlink" href="#">Acupuncture</a>
 <li><a class="mlink" href="#">Electrotherapy</a>
 <li><a class="mlink" href="#">Gait Ax</a>
 <li><a class="mlink" href="#">Hydrotherapy</a>
 <li><a class="mlink" href="#">Manipulation</a>
 <li><a class="mlink" href="#">Massage</a>
 <li><a class="mlink" href="#">Neurological rehabilitation</a>
 <li><a class="mlink" href="#">Orthotics</a>
 <li><a class="mlink" href="#">Paediatric physio</a>
 <li><a class="mlink" href="#">Pain management</a>
 <li><a class="mlink" href="#">Physiotherapy</a>
 <li><a class="mlink" href="#">Respiratory treatment</a>
 </ul></div>

 <table cellspacing="0" cellpadding="0" width="100%" align="center"><tr><td width="100%" height="6"></td></tr></table>

 <div id="mbutton"><a class="mwink" href="index.html">Contact us</a></div>
 <table cellspacing="0" cellpadding="0" width="100%" align="center"><tr><td width="100%" height="0"></td></tr></table>

 </div>

 <br><br>

 </td>​

Javascript：

 jQuery(".plus").click(function(){
      jQuery(this).parent('div').next('div').slideToggle();
 });​

我为所有包含加号图像的div分配了一个通用类“加号”，因此您无需为每个菜单编写代码。

这是演示 。

Answer 3

您需要针对这种行为使用JavaScript。 您可能宁愿使用javascript click事件，也可以使用诸如jQuery这样的轻松生活库

取自user 999您可以：

var something = document.getElementById('something');

something.style.cursor = 'pointer';
something.onclick = function() {
    // do something...
};

使用jQuery：

<div id="target">
  Click here
</div>

<script>
$(function(){

   $("#target").click(function() {
     alert("Handler for .click() called.");
   });
 });
</script>

更新使用您的代码示例，并使用jQuery，我们可以做类似的事情

    <!-- import jQuery library -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>

    <!-- JavaScript code for clicking the menu -->
    <script>
    $(function(){

       $("#mbutton").click(function() {
         window.location="http://google.com";
       });
    });
    </script>
    <div id="mbutton" style="cursor:pointer">
        <a class="mwink" href="index.html">About us</a>
    </div>

希望您能更好地理解它。