HTML:
<div class="container-fluid">
<div class="sidebar">
<ul class="pills">
<li id="l1"><a id="link1">Lesson 1</a></li> <hr>
<li id="l2"><a href="#" >Lesson 2</a></li> <hr>
<li id="l3"><a href="#" >Lesson 3</a></li> <hr>
</ul>
<div class="span16" id="target">
</div>
Run Code Online (Sandbox Code Playgroud)
使用Javascript:
$('#l1').click(function(){
$('#target').fadeOut('fast', function(){
$('#target').load("lesson/lesson1.html", function(){
$('#target').fadeIn('slow');
});
});
});
Run Code Online (Sandbox Code Playgroud)
我的网页中有5个链接,我想知道是否有任何一个代码而不是复制+粘贴多次.
所以我有像这样的照片

他们有相应的id标签.当你点击其中一个时,他们会弹出一个弹出窗口:

这个javascript加载的:
google.setOnLoadCallback(function()
{
$('div.recentbox').click(function()
{
var name = $(this).attr('id');
$('#titlethumb').prepend('<img class="imgs" src="stuff/"+name+"/thumbnail.jpg" />');
$('.box-inner').fadeOut('fast',function()
{
$('.box-inner').load('stuff/'+name+'/description.html', function()
{
$('.box-inner').fadeIn('slow');
});
});
});
});
Run Code Online (Sandbox Code Playgroud)
description.html
<div id="infobox-wrap">
<div id="infobox">
<div id="titlethumb">
<h2 class="infobox">linkur.com</h2>
<img id="imgs" src=""> <!--this image should be found in stuff/linkur/thumbnail.jpg-->
</div>
<div id="descriptionbuttons">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut leo quis ante sagittis volutpat ut quis dolor. Vivamus ut leo ut erat pellentesque imperdiet nec eget turpis. Nunc sit amet elit …Run Code Online (Sandbox Code Playgroud)