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

最新推荐文章于 2023-04-11 08:46:50 发布

EricaLSR

最新推荐文章于 2023-04-11 08:46:50 发布

阅读量1.4k

点赞数 1

分类专栏： ------JavaScript

本文链接：https://blog.csdn.net/lishaoran369/article/details/50272717

版权

------JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

现在轮到第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才会生效。