制作滑动门标签页

最新推荐文章于 2024-10-11 17:39:47 发布

jiudihanbing

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量1k

点赞数

文章标签： function class javascript jquery stylesheet div

本文链接：https://blog.csdn.net/jiudihanbing/article/details/5585367

版权

看了jQuery的视频做的标签页。自己也顺便敲了一下代码。

效果图如下：

鼠标移动到标签1上：

鼠标移动到标签2上时

鼠标移动到标签3上

感觉很神秘，其实当实现了就会觉得简单了。就是利用css和JavaScript实现的。

解决方案：

asp.net的代码如下：

</body>

css代码：

ul, li
{
margin: 0px;
padding: 0px;
list-style: none;
}
li
{
float: left;
background-color: Gray;
color: White;
padding: 5px;
margin-right: 2px;
border:1px solid white;
}

div.contentfirst
{
clear: left;
background-color: #6e5e6e;
color: White;
padding: 10px;
width: 300px;
height: 100px;
display: none;
}
div.contentin
{
display: block;
}

javascript代码：

var timeoutid;
$(document).ready(function() {
$("li").each(function(index) {
        //每一包装li的jquery对象都会执行function中的代码
        //index是当前执行这个function代码的li对应在所有li组成的数组中的索引值
        //有了index的值之后，就可以找到当前标签对应的内容区域。
        $(this).mouseover(function() {
            var liNode = $(this);
            //将原来显示的内容区域进行隐藏
            timeoutid = setTimeout(function() {
                $("div.contentin").removeClass("contentin");
                //对有tabin 的class定义的li清除tabin 的class
                $("li.tabin").removeClass("tabin");
                // 当前标签所对应的内容区域显示出来
                $("div").eq(index).addClass("contentin");
                liNode.addClass("tabin");
            }, 300);