JQuery Div Content Changer со ссылками

Question

Я хотел бы иметь div, который изменяет его содержимое на странице, когда щелкают навигационные ссылки с эффектом плавного перехода.У меня около 75 миниатюр в div, и только 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 внутри li хорошей идеей в этих обстоятельствах?Или кто-нибудь знает какой-либо плагин, который похож на приведенную выше ссылку, но не использует список для контента?Я просто хочу изменить содержимое, отображаемое в 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)