【JQuery实例】--标签页效果

来源：互联网发布：跳舞软件编辑：程序博客网时间：2024/05/22 18:24

现在轮到第3个例子了，它的整体页面如下：

图中第一组的标签是静态的，显示的内容直接加载。而第二类是从后台调出内容或者整个页面来显示的，需要用到AJAX，所以没有写完整，现在只是给一个框架。

第一组，HTML代码：

<span style="font-family:KaiTi_GB2312;font-size:18px;"><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title>JQuery实例四--标签页效果（内容是静态的）</title>    <link href="selectTab.css" rel="stylesheet" />    <script src="jquery.js"></script>    <script src="selectTab.js"></script></head><body>    <ul id="tabfirst">        <li class=" tabin">标签1</li>        <li>标签2</li>        <li>标签3</li>    </ul>    <div class="contentin contentfirst">我是内容1</div>    <div class =" contentfirst">我是内容2</div>    <div class=" contentfirst">我是内容3</div></body></html></span>

第二组HTML代码：

<span style="font-family:KaiTi_GB2312;font-size:18px;">HTML：<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title>JQuery实例四--标签页效果（内容是动态加载的）</title>    <link href="selectTab.css" rel="stylesheet" />    <script src="jquery.js"></script>    <script src="selectTab.js"></script></head><body>    <ul id="tabsecond">        <li class=" tabin">装入完整页面</li>        <li>装入部分页面</li>        <li>从远程获取数据</li>    </ul>    <div id="contentsecond">test</div></body></html></span>

他们公用一个CSS：

<span style="font-family:KaiTi_GB2312;font-size:18px;">body {}/*下面的饿两个，表示把标签横排显示，并赋颜色*/ul,li{    margin:0;    padding:0;    list-style:none;}#tabfirst li{    float:left ;    background-color :#868686;    color:white ;    padding:5px;/*设置字与字之间的距离，内边距*/    margin-right:2px;/*设置外边距*/    /*让所有的的标签框有一个边框，并让边框为白色,让标签和内容不紧挨着*/    border:1px solid white;}#tabfirst li.tabin{/*只在一个div上设置这个属性，然后再JS中动态给其他的添加*/    background-color :#6E6E6E;    border:1px solid #6E6E6E;/*让边框颜色和内容颜色一样，显示当前标签和当前内容是对应的*/}/*设置内容样式:竖直在标签下面*/div.contentfirst{    clear:left ;    background-color :#6E6E6E;    color:white ;/*字体颜色*/    /*设置内容的宽高*/    width:300px;    height:100px;    padding:10px;    display:none;/*先隐藏内容框*/}div.contentin{/*只在一个div上设置这个属性，然后再JS中动态给其他的添加*/    display:block ;/*显示内容框*/}/*对selectTab1页面的样式编写*/#tabsecond li{    float:left ;    background-color :white ;    color:blue  ;    padding:5px;/*设置字与字之间的距离，内边距*/    margin-right:2px;/*设置外边距*/    cursor:pointer;/*鼠标移到上面是手型效果*/}#tabsecond li.tabin{    background-color :#F2F6F8;    border:1px solid black;    border-bottom :0;/*去掉标签下边框*/    z-index:100;/*控制层高，让标签层盖住内容层*/    position:relative ;}#contentsecond{    width:300px;    height:100px;    padding:10px;    background-color :#F2F6F8;    clear:left ;    border:1px solid black;    position:relative;/*表示相对原来的位置进行移动*/    top:-1px;/*将内容框向上移动一个像素，覆盖住标签框的一部分*/}</span>

JS文件：

<span style="font-family:KaiTi_GB2312;font-size:18px;">var timeoutid;$(document).ready(function () {    ////找到所有的标签,鼠标的移入和移出事件    //$("li").mouseover(function () {    //    //鼠标移入的时候将原来内容区域隐藏    //    $("div.contentin").hide();    //    //将当前标签所对应内容显示出来    //});    $("#tabfirst li").each(function (index) {        //每一个有li的Jquery对象都会执行function中的代码        //index是当前执行这个function代码的li的索引值        //有了index后，就可以找到当前标签对应的内容区域        //当鼠标移入的时候        $(this).mouseover(function () {            var liNode = $(this);//这里的this代表li，保存一下，后面用到            //当鼠标进入的时候做一个延时，防止用户恶意的进行鼠标快速滑动造成数据库崩溃            timeoutid=setTimeout(function () {                //将原来现实的内容区域进行隐藏                $("div.contentin").removeClass("contentin");                //对有tabin定义的Class的li要进行class的清除                $("#tabfirst li.tabin").removeClass("tabin");                //将当前标签对应的内容区域显示出来                $("div.contentfirst").eq(index).addClass("contentin");                //让当前的标签li多一个classtabin                liNode.addClass("tabin");            }, 300);        }).mouseout(function () {//鼠标的移出事件            clearTimeout(timeoutid);//记录一下移出时的id        });    });    //接下来要写动态加载页面内容，这个需要JSP文件，VS没有，所以就不展示了等学到了再回来看})</span>

需要注意的点：

1、eq方法可以根据索引值只得到jquery对象中包含的多个元素中的某一个，并返回元素对应的新JQuery对象。
2、js中的setTimeout方法可以延时执行某些代码，对应的clearTimeout可以清除设定的延时操作。
3、z-index可以控制元素在页面中的层高，值越大层越高，可以覆盖住一些z-index值较低的元素。，并且只有position的值为relative或absolute的元素，z-index才会生效。

1 0