我试图让导航栏中的一些链接触发 jQuery 中的事件。
主体的 HTML 代码:
<body>
<div id="bodydiv">
<div id="header">
<div id="navbar">
<ul>
<li id="#linkabout"><span>About</span></li>
<li id="#linkservices"><span>Services</span></li>
<li id="#linkportfolio"><span>Portfolio</span></li>
<li id="#linknews"><span>News</span></li>
</ul>
</div>
</div>
<div id="middleAbout">
</div>
<div id="middleServices">
</div>
<div id="middlePortfolio">
</div>
<div id="middleNews">
</div>
<div id="footer">
</div>
</div>
</body>
jQuery 代码:
$(document).ready(function() {
$('span').hover(function() {
$(this).stop().fadeTo(100, 0.75);
}, function() {
$(this).stop().fadeTo(100, 1);
});
$('#linkServices').click(function(){
$('#middleAbout').hide('slide', {direction: 'left'}, 1000);
$('#middleServices').show('slide', {direction: 'right'}, 1000);
});
$('#linkPortfolio').click(function(){
$('#middleServices').hide('slide', {direction: 'left'}, 1000);
$('#middlePortfolio').show('slide', {direction: 'right'}, 1000);
});
$('#linkNews').hover(function(){
$('#middlePortfolio').hide('slide', {direction: 'left'}, 1000);
$('#middleNews').show('slide', {direction: 'right'}, 1000);
});
$('#linkAbout').click(function(){
$('#middleNews').hide('slide', {direction: 'left'}, 1000);
$('#middleAbout').show('slide', {direction: 'right'}, 1000);
});
});
最后,这是一个网站链接,用于描述我无法用文字描述的内容: http://www.darcain.com
我想让导航栏中的每个元素都链接到一个 div,当单击相应的 div 时,它会优雅地滑入。目前,它们只是漂亮的颜色。
当我将需要单击的 jQuery 对象更改为 div 本身时,它工作正常,但是对于导航栏链接,它根本不起作用。
我希望这是有道理的。
最佳答案
从“id”参数值中取出“#”符号。 JQuery 需要“#”符号才能知道它正在寻找一个 dom 元素,其“ID”参数的值与您提供的前面的名称相同,但您没有将“#”添加到 id 参数值。应该看起来像这样。
<li id="linkabout"><span>About</span></li>
<li id="linkservices"><span>Services</span></li>
<li id="linkportfolio"><span>Portfolio</span></li>
<li id="linknews"><span>News</span></li>
关于jquery - 为什么这些 jQuery 对象不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19074099/