Jquery实现div分页显示silder

效果如图，点击左边的链接，相应的内容显示在右侧，可能大家觉得这不简单，实际上我的这个是所有的内容全部放在一个网页文件中，各个内容分别放在不同的DIV中。

实现其实很简单，左侧的栏目代码

<div class="container" >
  <div class="sidebar1">
    <ul class="nav">
      <li><a href="#" οnclick="show('jj')"><strong>系统简介</strong></a></li>
      <li><a href="#" οnclick="show('login')"><strong>用户登录</strong></a></li>
        <li><a href="#" οnclick="show('zysx')"><strong>注意事项</strong></a></li>
         <li><a href="#" οnclick="show('grbkb')"><strong>个人备课簿</strong></a></li>
      <li><a href="#" οnclick="show('grgzs')"><strong>个人工作室</strong></a></li>
      <ul > 
       <li><a href="#" οnclick="show('grxxgl')"> >个人信息管理</a></li>
      <li><a href="#" οnclick="show('grbg')">>个人办公</a></li>
       <li><a href="#" οnclick="show('beike')">>写备课</a></li>
</ul>

脚本代码：很简单

<script language="JavaScript" type="text/javascript">
$(function(){$(".content").hide();$('#jj').show();});
function show(id)
{$(".content").hide();
	$('#'+id).show();}

</script>

 

具体内容的Div代码：为了控制页面高度，需要把这个DIv放在一个固定官渡的DIv中

 

 <div class="content" id="jj">
    <h1><a href="#">系统简介</a></h1>
    <p>志超网络备课系统是专门针对备课网络化而
设计的网络应用平台系统。</p>
    <p>该系统针对教师备课的需要和教师使用的实际情况，直接以word、powerpoint作为备课编辑的主体，支持word、powerpoint全部功能（包括插件），公式、符号图形能够特殊符号和绘图满足了部分学科对备课编辑复杂性的要求，使用起来更容易上手，不但让文科老师让教师轻松使用，更让理科教师彻底从公式编辑等限制中解脱出来，从而不再为特殊符号和绘图费尽心思</p>
    </div>

补充： 把所有的内容放在一个文件中会导致文件过大，实际上我们可以在一个页面上动态调用其他的网页文件来显示，如下面使用load来装载另一个网页的内容：

演示网站：Http://zhichaosoft.com:81  http://zhichao.zxq.net

 

$(function(){
	
 if ($("#disparea").height()<550)   {$("#disparea").height(550);} 
	show("jj.html");

});
function show(Url)
{
	Url="page/"+Url;
	$("#disp_area").hide();
	$("#disp_area").load(Url);
	
	
	$("#disp_area").fadeIn("slow");;
	}

</script>