我有这个代码，它适用于旋转菜单，显然是ul＆gt;李＆GT;菜单。
我想知道的是如何触发（onClick，HRef等）特定列表项（如rot7）的函数。
我想单击一行文本并触发该功能，这可能吗？
示例“点击此处去那里”，
有点像过去 - {a href =“some.html”}点击此处{/ a}页面加载。
在这种情况下，我希望文本打开第7个li＆gt;菜单项使用JQuery脚本的形式和功能。
在那里，明确为泥。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Bridgett's Electrolysis</title>
<!-- Favorite Icon --><link rel="shortcut icon" href="images/beLogoColor3D.png" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />
<style>
*{
margin:0;
padding:0;
}
body{
font-family:Arial;
}
#content{
margin:150px auto 10px auto;
}
.reference{
clear:both;
width:800px;
margin:30px auto;
}
.reference p a{
text-transform:uppercase;
text-shadow:1px 1px 1px #fff;
color:#666;
text-decoration:none;
font-size:10px;
}
.reference p a:hover{
color:#333;
}
</style>
<script type="text/javascript">
// EDITED
$(function () {
$('#link6').click(function () {
$('#rotmenu li:nth-child(6)').click();
});
});
</script>
</head>
<body>
<div class="logoback">
<div id="logo">
<img src="images/beWebLogoColor3D.png" height="250">
</div>
</div>
<div id="content">
<div class="rotator">
<div class="myh">STOP TWEEZING UNWANTED HAIR.....FOREVER!!!</div>
<ul id="rotmenu">
<li>
<a href="rot1" class="mytabs">Home</a>
<div style="display:none;">
<div class="info_image">1.jpg</div>
<div class="info_heading">Relax</div>
<div class="info_description">
<div class="myh1">Eliminate Unwanted Hair</div><br />
<div class="col2"><img src="images/page1_img1.png" alt="" width="90%"></div>
<div class="col2">
<span class="myh2">Safe, Permanent Hair Removal<br />
<br />
Electrolysis is:</span><br />
<span class="myh3home">• Still the only true permanent hair removal method and the only
permanent treatment recognized by the FDA<br />
• An excellent solution for those discouraged by the unsuccessful results of temporary
hair removal methods<br />
• For everyone<br />
• The preferred treatment for combating folliculitis<br />
<br />
</span>
</div>
<div id="mycenter" class="myh2"><a id="link6" href="javascript:;">Book now to schedule your Complimentary Consultation</a>
</div>
</div>
</div>
</li>
<li>
<a href="rot2" class="mytabs">News</a>
<div style="display: none;">
<div class="info_image">2.jpg</div>
<div class="info_heading">The Scoop</div>
<div class="info_description">
<div class="col1">
<img src="images/page2_img1.jpg" alt="" />
<img src="images/appointment-request1.png" width="60%" alt="" />
<img src="images/page2_img3.jpg" alt="" />
</div>
<div class="col3">
<div class="mytabs">Open at our new Location!</div>
<span class="myh3">See our Location Section for a Map or Directions.</span><br /><br /><br /><br />
<div class="mytabs">Online Appointment Booking is Now Available!</div>
<span class="myh3">Go to our Appointments Section and schedule your appointment today.</span><br /><br /><br /><br />
<div class="mytabs">All New Equipment!</div>
<span class="myh3">The latest and greatest equipment has been installed to offer you the most comfortable Electrolysis experience.</span>
</div>
</div>
</div>
</li>
<li>
<a href="rot3" class="mytabs">Services</a>
<div style="display:none;">
<div class="info_image">3.jpg</div>
<div class="info_heading">Here to Serve You</div>
<div class="info_description">
<span class="mytabs">Electrolysis</span><br />
<span class="myh3">These are the areas that Electrolysis can be performed on.</span><br />
<img src="images/areas.png" / width="100%" height="350">
</div>
</div>
</li>
<li>
<a href="rot4" class="mytabs">Location</a>
<div style="display:none;">
<div class="info_image">4.jpg</div>
<div class="info_heading">Come and Visit</div>
<div class="info_description">
<span class="mytabs">1003 E. Broad St. Mansfield TX 76063</span>
<iframe width="100%" height="355px" seamless="seamless" frameborder="0" scrolling="no" marginheight="0"
marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=1003+E+Broad+St,+Mansfield,+TX&aq=2&oq=1003+E+Broad&sll=32.800447,-97.289319&sspn=0.966172,1.783905&t=m&ie=UTF8&hq=&hnear=1003+E+Broad+St,+Mansfield,+Texas+76063&ll=32.565228,-97.130527&spn=0.007568,0.013937&z=14&output=embed">
</iframe>
<br />
</div>
</div>
</li>
<li>
<a href="rot5" class="mytabs">Contact Us</a>
<div style="display:none;">
<div class="info_image">5.png</div>
<div class="info_heading">Get in Touch</div>
<div class="info_description">
<div class="col1">
<span class="mytabs">Contact Info:</span><br />
<span class="myh3">Bridgett's Electrolysis<br />
1003 E. Broad St<br />
Mansfield, TX. 76063<br />
Phone:(817)879-7817<br />
email: <a href="mailto:bridgettselectro@gmail.com?subject=Info Request from your site">
bridgettselectro@gmail.com</a><br />
</span>
</div>
<div class="col3">
</div>
</div>
</div>
</li>
<li>
<a href="rot6" class="mytabs">FAQ</a>
<div style="display:none;">
<div class="info_image">6.png</div>
<div class="info_heading">Electrolysis Questions?</div>
<div class="info_description">
<Iframe src="faq/faq.htm" width="100%" height="400" frameborder="0" marginheight="0"></Iframe>
</div>
</div>
</li>
<li>
<a href="rot7" class="mytabs">Appointment</a>
<div style="display:none;">
<div class="info_image">book.jpg</div>
<div class="info_heading">Book It</div>
<div class="info_description">
<Iframe src="webappt/index.php" width="100%" height="405" frameborder="0" marginheight="0"></Iframe>
</div>
</div>
</li>
<li>
<a href="rot8" class="mytabs">FaceBook</a>
<div style="display:none;">
<div class="info_image">like.png</div>
<div class="info_heading">Coment or Like Us</div>
<div class="info_description">
<div class="mycenter"><span class="myh2">Be Sure to Visit our <a href="javascript: void(0)" onclick="window.open('https://www.facebook.com/bridgettselectro', 'FanPage');">FaceBook FanPage</a> for deals and coupons!</span></div>
<div class="col2">
<div class="fb-like", data-href="http://www.bridgettselectro.com" data-send="false" data-width="450" data-show-faces="true" data-colorscheme="dark" data-font="arial"></div>
</div>
<div class="col2">
<div class="fb-comments" data-href="https://www.facebook.com/BridgettsElectrolysis?fref=ts" data-num-posts="10" data-width="350" data-colorscheme="dark"></div>
</div>
</div>
</div>
</li>
</ul>
<div id="rot1">
<img src="" width="800" height="300" class="bg" alt=""/>
<div class="heading">
<h1></h1>
</div>
<div class="description">
<p></p>
</div>
</div>
</div>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script src="js/atooltip.jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var current = 1;
var iterate = function () {
var i = parseInt(current + 1);
var lis = $('#rotmenu').children('li').size();
if (i > lis) i = 1;
display($('#rotmenu li:nth-child(' + i + ')'));
}
display($('#rotmenu li:first'));
var slidetime = setInterval(iterate, 3000000);
$('#rotmenu li').bind('click', function (e) {
clearTimeout(slidetime);
display($(this));
e.preventDefault();
});
function display(elem) {
var $this = elem;
var repeat = false;
if (current == parseInt($this.index() + 1))
repeat = true;
if (!repeat)
$this.parent().find('li:nth-child(' + current + ') a').stop(true, true).animate({ 'marginRight': '-20px' }, 300, function () {
$(this).animate({ 'opacity': '0.7' }, 700);
});
current = parseInt($this.index() + 1);
var elem = $('a', $this);
elem.stop(true, true).animate({ 'marginRight': '0px', 'opacity': '1.0' }, 300);
var info_elem = elem.next();
$('#rot1 .heading').animate({ 'left': '-420px' }, 500, 'easeOutCirc', function () {
$('h1', $(this)).html(info_elem.find('.info_heading').html());
$(this).animate({ 'left': '0px' }, 400, 'easeInOutQuad');
});
$('#rot1 .description').animate({ 'bottom': '-425px' }, 500, 'easeOutCirc', function () {
$('p', $(this)).html(info_elem.find('.info_description').html());
$(this).animate({ 'bottom': '0px' }, 400, 'easeInOutQuad');
})
$('#rot1').prepend(
$('<img/>', {
style: 'opacity:0',
className: 'bg'
}).load(
function () {
$(this).animate({ 'opacity': '1' }, 600);
$('#rot1 img:first').next().animate({ 'opacity': '0' }, 700, function () {
$(this).remove();
});
}
).attr('src', 'images/' + info_elem.find('.info_image').html()).attr('width', '1200').attr('height', '500')
);
}
});
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));
</script>
</body>
</html>
答案 0 :(得分：0)
<a id="link6" href="javascript:;">click to open menu 6</a>
<script>
// EDITED
$(function() {
$('#link6').click(function(){
$('#rotmenu li:nth-child(6)').click();
});
});
</script>
编辑：
上面的代码不起作用，因为每次菜单更改页面设置容器（.description）内容与原始标记初始化时，所以包含我们的a标记的页面内容被覆盖通过原始内容与前一个相同，但覆盖旧内容，这就是单击处理程序不起作用的原因 - 因为它是在一个被覆盖的项目上设置的。
每次菜单更改页面时都不设置点击处理程序，它应该绑定到链接，就像taht：<a onclick="$('#rotmenu li:nth-child(6)').click();" href="javascript:;">Book now to schedule your Complimentary Consultation</a>一样简单。
就是这样 - 工作正常。