无需跳转页面就能翻页的效果~

看到很多网页都是这样子的：点击左边的导航栏后就跳转页面，新页面的做擦导航栏内容没有任何改变，只有右边的一块的商品内容随之改变

于是我就开始思考怎么样才能不跳转页面就改变一个div里面的内容呢？

一开始想到的是使用JS（本人JS还在基础学习阶段，只能写出这样的小程序），后面就用别的方法写了一个。

先写准备好要改变的图片，文字，分别保存在不同的数组里或者存放在多维数组里；再在div里面写一个空表格，然后点击翻页时向程序中传入不同的参数调用数组，改变单元格内的img标签的src，改变显示的图片和文字内容等。如下：

<script language="javascript">

var imgs=new Array();

imgs[0]="...";                                                              //保存要改变的图片的路径（偷懒下 全部注释都用"//"）

var representations=new Array();

...

var buttonName=new Array();

...                                                                                //其他变化内容

var n=10;                                                                  //每页显示10个内容

function pageChanging(num)                            //一个简单的的js程序

{

    var proImg=document.getElementById("img"+num)；

    var repStr=document.getElementById("representation"+num)；

    var button=document.getElementById("button"+num);

    for(var i=0;i<n;i++){                                            //改变其他单元格的相应内容

        num=num+i;

        proImg.src=imgs[num];

        repStr.innerText=representations[num];//改变图片右边的文字描述

        button.value=buttonName[num];               //改变按钮的相应属性

        ......                                                                   //改变其他相应属性

    }

}

</script>

<div id="content">

<div id="products">

<table>

<tr>

     <td id="img0"><img src="" /></td>

    <td id="representatin0"></td>

    <td id="button0"><form action="" method="post"><input id="button1" type="button" value="none" /></form></td>

</tr>

<tr>

    <td id="img1"><img src="" /></td>//img标签内src为空，将在产生点击事件后传入

    <td id="representatin1"></td>

    <td id="button1"><form action="" method="post"><input id="button1" type="button" value="none"  /></form></td>

</tr>

</table>

</div>                     // #product的结尾

<ul id="page_change">

    <li οnclick="pageChnging(0)">page 1</li>

    <li οnclick="pageChnging(10)">page 2</li>

</ul>

</div>                  //#content的结尾

这就结束了~

用锚点实现：

由于我的JS学的还不到家，暂时想不到更好的方法了，写的时候老出错...之后我就想到用锚点实现这个功能,无需使用任何JS代码：

<div id="product">

<a name="a1"></a>            //设置一个锚点

<table>

  <tr>

    <td class="img"></td>    //设置class属性 方便修改样式表
    <td class="representation"></td>
    <td class="guis"></td>

  </tr>  

  <tr>

    <td class="img"></td>
    <td class="representation"></td>
    <td class="guis"><form action=""><input type="botton" οnclick="function()"/></form></td>

  </tr>  

......                                        //更多的行

</table>

<a name="a2"></a>         //设置一个锚点

<table>

 ......

</table>

...

</div>                     // #product的结尾

<p>

<a href="#a1">page 1</a>

<a href="#a2">page 2</a>

...

</p>

设置css样式

#product{

    width:

    height:

    overflow:heiden;//隐藏超出div大小的部分

}

这样div里就只显示一个表格内容（表格大小需要调整跟div行宽和高一致）

这样就实现了这个功能，缺点可能就是每次打开页面就要下载该类的所有内容（没有实战经验啊）。

写下自己的想法~

求高手路过指点，勿喷额...