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是个好主意吗？或者有没有人知道任何类似于上述链接的插件，但不使用内容列表？我只想通过一些链接更改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>

我没有测试，但我认为它会起作用（需要jquery lib）

Jquery div内容更改器与链接

1 个答案: