北京网站制作
网站知识 > 技术答疑
瑞恒网络为企业量身打造北京网站建设北京网站制作北京网站设计等一系列专业服务!
JQuery实例-标签页效果
时间:2016-06-23  来源:网站建设公司  作者:网站制作公司  点击:
标签切换效果,可以说在网站制作中是最常见的效果,本篇文章主要是对JQuery实现tab标签切换效果的简单实例进行了介绍,需要的朋友可以用来参考下,希望对大家有所帮助。 首先我们先将html部分写出来: ul id=tabfirst li class=tabin标签1/li li标签2/li li标
标签切换效果,可以说在网站制作中是最常见的效果,本篇文章主要是对JQuery实现tab标签切换效果的简单实例进行了介绍,需要的朋友可以用来参考下,希望对大家有所帮助。
首先我们先将html部分写出来:
<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>
从html布局中我们可以看出,我们用li写了三个标签,再用三个div来写它们的内容。当我鼠标单击某个标签时,则显示相对应的内容。
接下来我们再将CSS样式写一下:
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 {/*默认选项的效果*/
         background-color: #6E6E6E;
         border: 1px solid #6E6E6E;
}
div.contentfirst {
         clear: left;/*清除上面浮云的li即主菜单的浮动对下面的内容的影响*/
         background-color: #6E6E6E;
         color: white;
         width: 300px;
         height: 100px;
         padding: 10px;
         display: none;/*所有的内容在一开始时都不显示*/
}
div.contentin {
         display: block;/*默认显示的一个内容块*/
}
 
#tabsecond li {/*标签浮动*/
         float: left;
         background-color: white;
         color: blue;
         padding: 5px;
         margin-right: 2px;
         cursor: pointer;
}
#tabsecond li.tabin {/*当前选中显示的,或者是默认显示的标签的效果*/
         background-color: #F2F6FB;
         border: 1px solid black;
         border-bottom: 0;
         z-index: 100;
         position: relative;
}
#contentsecond {/*内容版块*/
         width: 500px;
         height: 200px;
         padding: 10px;
         background-color: #F2F6FB;
         clear: left;
         border: 1px solid black;
         position: relative;
         top: -1px;
}
img {
         display: none;
}
最后就是用jquery写出标签切换的效果,当然还要记得引用jq库:
<script type="text/javascript" src="js/jquery.js"></script>
<script>
var timoutid;//定义一个全局变量,给下面的定时器来使用
$(document).ready(function(){
         $("#tabfirst li").each(function(index){//each()相当于普通的循环语句,其可以在包含了多个元素的JQuery对象上选择each方法,即他function中的内容被每一个元素都执行了,同时这个function还可以接收到一个参数,这里是索引值
                   $(this).mouseover(function(){
                            var liNode=$(this);//存储当前这个this,给下面的第13行使用
                           
                            timoutid = setTimeout(function(){//开启定时器,并存储起来
                            $("div.contentin").removeClass("contentin");
                            $("li.tabin").removeClass("tabin");
                            $("div:eq(" + index + ")").addClass("contentin");//eq可以选择指定的元素,其选择的方式是用数字
                            //$(this).addClass("tabin");
                            liNode.addClass("tabin");//当前这个元素的CSS样式改变与第6行配合
                            },300);//延时300毫秒,再做以上的事情
                   }).mouseout(function(){//鼠标离开时
                            clearTimeout(timoutid);//关闭我们存储的定时器
                   });
         });
});
</script>
以上一款简单实用的tab标签选项卡切换特效就做出来啦!
返回关闭本页
上一篇:CSS搜索框样式   下一篇:没有了
Copyright © 2006-2013 北京瑞恒天龙科技有限公司 All Rights Reserved  |  北京网站建设知名服务商  |  北京网站制作 | 京ICP备11004170号   京公网安备110107000463号
地址:北京市海淀区永定路长银大厦B座4层4B09  非工作时间:15810379666  服务热线:400-600-6204 座机:010-89941606 转801/802/803/804  版权所有 盗版必究!
  
在线咨询
关闭
电话咨询
网站制作电话
400-600-6204