我发现这段代码可以放在其中一个页面中。但是我一进入网站就不知道如何让其中一个活跃起来。到第一项的直接链接现在可以使用。我们如何才能在进入网站后立即激活第一个链接？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>Demo: jQuery Slide & Fade Content</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="slide-fade-content.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.more').live('click',function(){
var href = $(this).attr('href');
if ($('#ajax').is(':visible')) {
$('#ajax').css('display','block').animate({height:'1px'}).empty();
}
$('#ajax').css('display','block').animate({height:'200px'},function(){
$('#ajax').html('<img class="loader" src="loader.gif" alt="">');
$('#ajax').load('slide-fade-content.html #'+href,function(){
$('#ajax').hide().fadeIn().highlightFade({color:'rgb(253,253,175)'});
});
});
return true;
});
});
</script>
</head>
<body>
<div id="wrap">
<div id="demo">
<table width="900" border="1"><tr><td width="150" valign="top"><ul>
<li><a class="more" href="#first-item">First Item</a></li>
<li><a class="more" href="#second-item">Second Item</a></li>
<li><a class="more" href="#third-item">Third Item</a></li>
</ul></td>
<td width="750"><div id="ajax"></div></td></tr></table>
</div>
</div>
</body>
</html>
最佳答案
我通常完成此操作的方式是在加载时手动触发事件，如下所示:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>Demo: jQuery Slide & Fade Content</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="slide-fade-content.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.more').live('click',function(){
var href = $(this).attr('href');
if ($('#ajax').is(':visible')) {
$('#ajax').css('display','block').animate({height:'1px'}).empty();
}
$('#ajax').css('display','block').animate({height:'200px'},function(){
$('#ajax').html('<img class="loader" src="loader.gif" alt="">');
$('#ajax').load('slide-fade-content.html #'+href,function(){
$('#ajax').hide().fadeIn().highlightFade({color:'rgb(253,253,175)'});
});
});
return true;
});
$('.more').first().click();
});
</script>
</head>
<body>
<div id="wrap">
<div id="demo">
<table width="900" border="1"><tr><td width="150" valign="top"><ul>
<li><a class="more" href="#first-item">First Item</a></li>
<li><a class="more" href="#second-item">Second Item</a></li>
<li><a class="more" href="#third-item">Third Item</a></li>
</ul></td>
<td width="750"><div id="ajax"></div></td></tr></table>
</div>
</div>
</body>
</html>
添加的是 $('.more').first().click(); 在点击事件绑定(bind)后添加。然后，我获取第一个 more 链接并单击。在这里现场观看http://jsfiddle.net/eEk2v/
关于java - jQuery 幻灯片淡入淡出内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14856674/