0
이 코드는 분명히 ul> li> 메뉴 인 회전 메뉴에서 작동합니다.콘텐츠에서 메뉴 항목을 직접 호출하는 방법은 무엇입니까?
rot7과 같은 특정 목록 항목에 대해 함수를 (onClick, HRef 등) 트리거하는 방법을 알고 싶습니다.
텍스트 줄을 클릭하여 기능을 실행하고 싶습니다. 가능합니까?
예
좀 옛날처럼, "이 이동하려면 여기를 클릭하십시오 '- {A HREF ="some.html "} {/ A} 여기에 페이지가로드를 클릭합니다.이 경우 텍스트가 JQuery 스크립트의 양식과 기능을 사용하여 7th li> 메뉴 항목을 열길 원합니다.
진흙으로 명확합니다.
<!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:[email protected]?subject=Info Request from your site">
[email protected]</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>
... 요소에'display' 메서드를 호출하면 어떨까요? 시도한 코드로 명확하게 나타낼 수는 있지만 작동하지 않습니까? – nneonneo
onClick.Display 메서드를 시도했지만 작동하지 못했습니다. 나는 JQuery 나 Java 녀석이 아니다. 그냥 템플릿으로 작업하고 목록 항목을 호출하는 함수를 트리거하는 방법을 알아낼 수 없습니다. – JoeHughes