带链接的jquery div内容更改器

Question

我想要一个div，当用淡入淡出的过渡效果单击导航链接时，它会更改页面上的内容。我在div中有大约75个缩略图，只有15个缩略图一次显示，其余显示通过点击其他链接。我发现它同时具有导航和内容通过淡出过渡改变这个jQuery内容切换：

http://www.impressivewebs.com/demo-files/content-switcher/content-switcher-javascript.html#two

但它采用的是列表中的内容...我试着反正添加我的内容，它的工作原理，但这在适当的标记方面可能不是一个好主意。 ：S

例如：

<ul id="content-slider-inside"> 
<li id="one"> 
<div class="profilethumbwrap"><a href="student.php?p=1"><img src="images/img1.jpg" width="100" height="130" class="rollover teaserimage" /></a><br \><p>Image caption</p></div> 
</li> 
<li id="two"> 
<div class="profilethumbwrap"><a href="student.php?p=1"><img src="images/img2.jpg" width="100" height="130" class="rollover teaserimage" /></a><br \><p>Image caption2</p> 
</div> 
</li> 
</ul> 
<div id="pgnav"> 
<ul> 
<li><a href="#one" class="selected">1</a></li> 
<li><a href="#two">2</a></li> 

使用DIV的内里在这种情况下是一个好主意？或者是否有人知道任何类似于上述链接的插件，但是没有使用内容列表？我只是想通过一些链接来改变div中显示的内容，让链接指向锚点，这样我就可以直接链接到每个“页面”，并有一个很好的衰落过渡... ^^;

Answer 1

也许是这样的：

<ul id="navigation"> 
<li><a href="#" data-id="one">1</a></li> 
<li><a href="#" data-id="two">2</a></li> 
</ul> 
<div id="one" class="page"> 
Put content here... 
</div> 
<div id="two" class="page"> 
Put content here... 
</div> 

<script> 

$(function(){ 
    $("#navigation").find("a").click(function(e){ 
    e.preventDefault(); 
    var id = $(this).attr("data-id"); //get id for the page you wanna show 
    $(".page").hide(); //hide all pages with content could use fadeOut or something 
    $("#" + id).fadeIn(); //fade in the page you wanna show 

    }); 
}); 

</script> 

我haven't测试，但我认为它会工作（需要jQuery的LIB）