javascript - 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>

PLUSボタンをクリックするとサブメニューが開き、

私の問題は、完全なdivをアンカーリンクにする方法です(mbutton divの任意の部分をクリックすると、リンクをたどる必要があります)PLUSボタンをクリックしている間、サブメニューが開きます..

基本的に、テキストだけでなく、すべての部分をクリック可能にしたいのですが（ホーム、私たちについてなど）、プラスボタンはサブメニューも開く必要があります...

誰かが私を案内できますか？現時点では、アンカーテキストのみをクリック可能にするか、javascript サブメニューを開くことができなくなります...

CSSでできますか？？

Answer 1

display:block方法です。

#plus a { display:block }

Answer 2

まず、複数の要素に同じ ID を設定しています。これは誤りです。各要素に一意の 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();
 });​

plus 画像を含むすべての div に共通のクラス 'plus ' を割り当てたので、メニューごとにコードを記述する必要はありません。

これがデモです。

Answer 3

この種の動作には JavaScript を使用する必要があります。JavaScript のクリック イベントを使用するか、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>

あなたがそれをよりよく理解することを願っています。