[英]Making a div clickable and a javascript to run some different link
我在頁面上的菜單有以下代碼
<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 }
首先,您為多個元素輸入了相同的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分配了一個通用類“加號”,因此您無需為每個菜單編寫代碼。
這是演示 。
您需要針對這種行為使用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>
希望您能更好地理解它。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.