缩放部分的菜单项我需要它们具有单击按钮的功能。我需要像复选框一样运行的 Test1-4。缩放至按钮工作正常。测试 1-4 无法正常工作
<body>
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li><a title='Zoom to U.S' input type='button' name='US' onclick='US();'><span>Zoom to U.S.</span></a></li>
<li><a title='Zoom to Canada' input type='button' name='Canada' onclick='Canada();'><span>Zoom to Canada</span></a></li>
<li><a title='Zoom to Mexico' input type='button' name='Mexico' onclick='Mexico();'><span>Zoom to Mexico</span></a></li>
<li><a title='Test 1 KML' input type='checkbox' id='kml-Test1-check' name='kml-Test1-check' onclick="toggleKml('Test1');"><span>Test 1 KML</span></a></li>
<li><a title='Test 2 KML' input type='checkbox' id='kml-Test2-check' name='kml-Test2-check' onclick="toggleKml('Test2');"><span>Test 2 KML</span></a></li>
<li><a title='Test 3 KML' input type='checkbox' id='kml-Test3-check' name='kml-Test3-check' onclick="toggleKml('Test3');"><span>Test 3 KML</span></a></li>
<li><a title='Test 4 KML' input type='checkbox' id='kml-Test4-check' name='kml-Test4-check' onclick="toggleKml('Test4');"><span>Test 4 KML</span></a></li>
<li><a title='Additional KMLs'input type='button' name='AKML' onclick='open_win();'><span>Additional KMLs</span></a></li>
<li><a title='Remove all KMLs on the screen'input type='button' name='RKML' onclick='killKML();'><span>Remove All KMLs</span></a></li>
<li class='last'><a title="Contact"><span>Contact</span></a></li>
</ul>
</div>
</body>
#cssmenu {
border: none;
border: 0px;
margin: 0px;
padding: 0px;
font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
width: auto;
}
#cssmenu ul {
background: #333333;
height: 35px;
list-style: none;
margin: 0;
padding: 0;
}
#cssmenu li {
float: left;
padding: 0px;
}
#cssmenu li a {
background: #333333 url('images/seperator.png') bottom right no-repeat;
display: block;
font-weight: normal;
line-height: 35px;
margin: 0px;
padding: 0px 25px;
text-align: center;
text-decoration: none;
}
#cssmenu > ul > li > a {
color: #cccccc;
}
#cssmenu ul ul a {
color: #cccccc;
}
#cssmenu li > a:hover,
#cssmenu ul li:hover > a {
background: #2580a2 url('images/hover.png') bottom center no-repeat;
color: #FFFFFF;
text-decoration: none;
}
#cssmenu li ul {
background: #333333;
display: none;
height: auto;
padding: 0px;
margin: 0px;
border: 0px;
position: absolute;
width: 225px;
z-index: 200;
/*top:1em;
/*left:0;*/
}
#cssmenu li:hover ul {
display: block;
}
#cssmenu li li {
background: url('images/sub_sep.png') bottom left no-repeat;
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 225px;
}
#cssmenu li:hover li a {
background: none;
}
#cssmenu li ul a {
display: block;
height: 35px;
font-size: 12px;
font-style: normal;
margin: 0px;
padding: 0px 10px 0px 15px;
text-align: left;
}
#cssmenu li ul a:hover,
#cssmenu li ul li:hover > a {
background: #2580a2 url('images/hover_sub.png') center left no-repeat;
border: 0px;
color: #ffffff;
text-decoration: none;
}
#cssmenu p {
clear: left;
}
最佳答案
您的 HTML 是正确的，而不是
<li><a title='Zoom to U.S' input type='button' name='US' onclick='US();'><span>Zoom to U.S.</span></a></li>
使用
<li><a title='Zoom to U.S'><input type='button' name='US' onclick='US();'/><span>Zoom to U.S.</span></a></li>
关于javascript - 在同一个 CSS 水平菜单中组合复选框和按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19923762/