制作一个可点击的div和一个运行不同链接的javascript_Javascript_Css_Html

制作一个可点击的div和一个运行不同链接的javascript

javascript css html

制作一个可点击的div和一个运行不同链接的javascript,javascript,css,html,Javascript,Css,Html,我在第页的菜单上有以下代码 <td width="200" valign="top" align="left" bgcolor="#ffffff"> <div id="stemenu"> <div id="mbuttonon"> <a class="mwink" href="index.html">Home</a> </div> <tabl

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

<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来做吗？？？

display:block

就是方法

#plus a { display:block }

display:block

是方法

#plus a { display:block }

这种行为需要使用JavaScript。您可能更愿意使用javascript单击事件，或者使用类似的ease your life库

取自

用户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>


点击这里
$（函数（）{
$（“#目标”）。单击（函数（）{
警报（“调用了.click（）的处理程序”）；
});
});

更新使用您的代码示例和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>


$（函数（）{
$（“#mbutton”）。单击（函数（）{
window.location=”http://google.com";
});
});

希望您能更好地理解它。

这种行为需要使用JavaScript。您可能更愿意使用javascript单击事件，或者使用类似的ease your life库

取自

用户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>


点击这里
$（函数（）{
$（“#目标”）。单击（函数（）{
警报（“调用了.click（）的处理程序”）；
});
});

更新使用您的代码示例和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>


$（函数（）{
$（“#mbutton”）。单击（函数（）{
window.location=”http://google.com";
});
});

希望您能更好地理解它。

首先，您为多个元素放置了相同的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>

我为所有包含plus图像的div分配了一个公共类“plus”，这样就不需要为每个菜单编写代码

这是一个问题。

首先，您为多个元素放置了相同的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>

我为所有包含plus图像的div分配了一个公共类“plus”，这样就不需要为每个菜单编写代码

这是问题的答案。

请重新表述你问题的标题。我尝试过更改标题。请重新表述你问题的标题。我尝试过更改它。谢谢。你的答案看起来很有帮助，你能多解释一点吗？谢谢。你的答案看起来很有帮助，你能多解释一点吗？查看演示。使用此代码打开子菜单。让我看看你面对的是什么问题。使用此代码打开子菜单。让我看看你面临什么问题