使一个div可点击和一个JavaScript以运行一些不同的链接
[英]Making a div clickable and a javascript to run some different link
问题描述
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.. 我的问题是，如何使完整的div成为锚链接（单击mbutton div的任何部分，它都应跟随该链接）当单击加号按钮时，应打开子菜单。
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... 目前，我要么只能使锚文本可点击，要么我无法打开javascript子菜单...
Can I do it in CSS?? 我可以在CSS中做吗？
3 个解决方案
解决方案1
2 2012-06-05 19:14:19
display:block是方法。
#plus a { display:block }
解决方案2
2 已采纳 2012-06-05 19:34:30
Firstly, You have put same ids for more than one element, thats wrong. 首先，您为多个元素输入了相同的ID，这是错误的。 Assign uniqpe Id name for each element. 为每个元素分配uniqpe ID名称。
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 : 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. 我为所有包含加号图像的div分配了一个通用类“加号”，因此您无需为每个菜单编写代码。
解决方案3
1 2012-06-05 19:19:48
You need to use JavaScript for this kind of behavior. 您需要针对这种行为使用JavaScript。 You might rather use javascript click events or use a ease your life library like jQuery 您可能宁愿使用javascript click事件，也可以使用诸如jQuery这样的轻松生活库
Taked from user 999 you could: 取自user 999您可以：
var something = document.getElementById('something');
something.style.cursor = 'pointer';
something.onclick = function() {
// do something...
};
Using jQuery: 使用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 更新使用您的代码示例，并使用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>
hope you understand it better. 希望您能更好地理解它。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
使 div 成为可点击的链接 - Making div a clickable link
jQuery使整个Div成为_blank的可点击链接 - jQuery making a whole Div a clickable link with _blank
CSS-使div可点击...一些问题 - CSS - making a div clickable… some problems
制作一个 <div> 在Wordpress中可点击 - Making a <div> Clickable in Wordpress
可点击div内的链接 - Link inside clickable div
使链接在 Javascript 中可点击？ - Making links clickable in Javascript?
在div中使文本网址可点击 - Making text urls clickable in a div
使 div 文本中的链接可点击 - Making links in the text of a div clickable
锚标签无法使div可点击 - anchor tag in not making div clickable
在javascript中使div可点击 - Make a div clickable in javascript
相关标签