Making a div clickable and a javascript to run some different link
Question
i have following code for my menu on page
<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>
clicking on PLUS button opens sub menu,
my issue is, How can I make complete div an anchor link ( clicking on any part of mbutton div, it should follow the link) WHILE clicking on PLUS button, it should open the sub menu..
Basically, I want to make all the part clickable, not only the text (eg Home, About us), while plus button should open sub menu too...
Can somebody guide me? for the moment, either I can make only anchor text clickable or I lose javascript sub menu opening...
Can I do it in CSS??
3 answers
solution1
2 2012-06-05 19:14:19
display:block是方法。
#plus a { display:block }
solution2
2 ACCPTED 2012-06-05 19:34:30
Firstly, You have put same ids for more than one element, thats wrong. Assign uniqpe Id name for each element.
Try this :
<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();
});
I have assigned a common class 'plus ' to all divs which contains plus image, so that you don't need to writ code for each menu.
Here is the Demo .
solution3
1 2012-06-05 19:19:48
You need to use JavaScript for this kind of behavior. You might rather use javascript click events or use a ease your life library like jQuery
Taked from user 999 you could:
var something = document.getElementById('something');
something.style.cursor = 'pointer';
something.onclick = function() {
// do something...
};
Using jQuery:
<div id="target">
Click here
</div>
<script>
$(function(){
$("#target").click(function() {
alert("Handler for .click() called.");
});
});
</script>
Update Using your code sample, and using jQuery we can do something like
<!-- 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>
hope you understand it better.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Making div a clickable link
jQuery making a whole Div a clickable link with _blank
CSS - making a div clickable… some problems
Making a <div> Clickable in Wordpress
Link inside clickable div
Making links clickable in Javascript?
Making text urls clickable in a div
Making links in the text of a div clickable
anchor tag in not making div clickable
Make a div clickable in javascript
Related Tags