jQuery实现的一个tab切换效果内部还嵌有切换
大致效果如图
下面是代码：自己导入jQuery包。
样式：
<style type="text/css">
body,ul,li,div,a{margin:0px;padding:0px;}
body{margin-top:10px;margin-left:15px;}
#all{border-left:1px solid #ccc;border-right:1px solid #ccc;border-bottom:1px solid #ccc;width:255px;}
#title li{float:left;list-style:none;width:50px;border-top:2px solid #f60;border-right:1px solid #ccc;text-align:center;
padding-top:3px;}
#title li:last-child{border-right:1px solid #fff;}
.new{border-bottom:1px solid #fff;color:#f60;}
.old{border-bottom:1px solid #ccc;}
#content{clear:both;}
#content ul{margin-left:5px;list-style:none;float:left;}
#content li{width:40px;height:30px;background-color:#f60;text-align:center;color:#fff;}
.inContent{width:205px;height:90px;background-color:#f6c;margin-left:50px;}
</style>
js代码：
<script type="text/javascript">
$(function(){
$("#title li:first").addClass("new").siblings().addClass("old");
$("#content div:first").show().siblings().hide();
$(".inContent:first").show().siblings().hide();
$("#title li").click(function(){
$(this).addClass("new").removeClass("old").siblings().addClass("old").removeClass("new");
$(".info").hide().eq($("#title li").index(this)).show();
$(".info div:first-child").show().siblings().hide();
});
$(".info li").mouseover(function(){
$(this).css("color","#20f");
$(".inContent").hide().eq($(".info li").index(this)).show();
});
$(".info li").mouseout(function(){
$(this).css("color","#fff");
});
});
</script>
html结构：
<div id="all"> <div id="title"> <ul><li>要闻</li><li>国内</li><li>时尚</li><li>旅游</li><li>科技</li></ul> </div> <div id="content"> <div style="clear:both;" class="info"> <ul><li>01</li><li>02</li><li>03</li></ul> <div> <div class="inContent">1aaa看你是些在li标签里面还是些在li 的a标签里面如果是1aaa</div> <div class="inContent">1bbb看你是些在li标签里面还是些在li 的a标签里面如果是1bbb</div> <div class="inContent">1ccc看你是些在li标签里面还是些在li 的a标签里面如果是1ccc</div></div> </div> <div class="info"> <ul><li>01</li><li>02</li><li>03</li></ul> <div> <div class="inContent">2aaa看你是些在li标签里面还是些在li 的a标签里面如果是1aaa</div> <div class="inContent">2bbb看你是些在li标签里面还是些在li 的a标签里面如果是1bbb</div> <div class="inContent">2ccc看你是些在li标签里面还是些在li 的a标签里面如果是1ccc</div></div> </div> <div class="info"> <ul><li>01</li><li>02</li><li>03</li></ul> <div> <div class="inContent">3aaa看你是些在li标签里面还是些在li 的a标签里面如果是3aaa</div> <div class="inContent">3bbb看你是些在li标签里面还是些在li 的a标签里面如果是3bbb</div> <div class="inContent">3ccc看你是些在li标签里面还是些在li 的a标签里面如果是3ccc</div> </div> </div> <div class="info"> <ul><li>01</li><li>02</li><li>03</li></ul> <div> <div class="inContent">4aaa看你是些在li标签里面还是些在li 的a标签里面如果是4aaa</div> <div class="inContent">4bbb看你是些在li标签里面还是些在li 的a标签里面如果是4bbb</div> <div class="inContent">4ccc看你是些在li标签里面还是些在li 的a标签里面如果是4ccc</div> </div></div> <div class="info"> <ul><li>01</li><li>02</li><li>03</li></ul> <div> <div class="inContent">5aaa看你是些在li标签里面还是些在li 的a标签里面如果是5aaa</div> <div class="inContent">5bbb看你是些在li标签里面还是些在li 的a标签里面如果是5bbb</div> <div class="inContent">5ccc看你是些在li标签里面还是些在li 的a标签里面如果是5ccc</div> </div></div> </div> </div>
相关推荐
-
jQuery实现TAB风格的全国省份城市滑动切换效果代码
本文实例讲述了jQuery实现TAB风格的全国省份城市滑动切换效果代码.分享给大家供大家参考.具体如下: 这里演示jQuery实现的全国省市菜单,加入了选项卡风格,把全国城市按字母范围归类,鼠标移到某一分类的时候,滑动门展开显示所属的全国省分和城市.特别适合于分类信息网站使用.当然,在需要选择省市的时候,也是可以用的.仔细看了下,菜单里面的城市还比较全,你不用再手动添加城市了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-tab
-
jQuery实现tab标签自动切换的方法
本文实例讲述了jQuery实现tab标签自动切换的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xht
-
jquery自动切换tabs选项卡的具体实现
本节内容:jquery实现自动切换选项卡. 代码: 复制代码 代码如下: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><%String path = request.getContextPath(); %><!DOCTYPE html PUBLIC "-//W3C//DTD HTM
-
jQuery简单tab切换效果实现方法
本文实例讲述了jQuery简单tab切换效果实现方法.分享给大家供大家参考.具体如下: <script src="js/jquery-latest.js"></script> <SCRIPT language=javascript type=text/javascript> $(document).ready(function () { $('.tabtitle li').click(function () { var index = $(this)
-
jQuery实现滚动切换的tab选项卡效果代码
本文实例讲述了jQuery实现滚动切换的tab选项卡效果代码.分享给大家供大家参考.具体如下: 这里介绍的jquery tab选项卡滚动动态切换代码,似乎很个性的网页选项卡,没有边框的修饰,但十分简约大方,选项卡菜单目前在各大网站很流行,做为前端设计者,能够得心应手的写出一个选项卡是很有必要的哦,希望本代码能为您带去一份参考资料. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-scroll-cha-tab-nav-style-
-
jQuery实现带幻灯的tab滑动切换风格菜单代码
本文实例讲述了jQuery实现带幻灯的tab滑动切换风格菜单代码.分享给大家供大家参考.具体如下: 这是一款很不错的TAB滑动切换效果,jQuery带幻灯的tab滑动切换风格菜单导航条,点击上方的文字,下边就向左或向右滑动切换,动画效果的TAB选项卡. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-flash-style-tab-cha-menu-codes/ 具体代码如下: <!DOCTYPE html> <head&g
-
jquery实现的仿天猫侧导航tab切换效果
本文实例讲述了jquery实现的仿天猫侧导航tab切换效果.分享给大家供大家参考.具体如下: 这里演示jquery实现仿天猫侧导航tab切换效果,引入外部JS,若初次运行有错误请刷新一页面即可.本菜单是仿天猫商城的菜单,大块的div菜单,支持超多的产品分类,大网站风格,大气实用的多分类网页菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-ftmail-nav-tab-cha-codes/ 具体代码如下: <!DOCTYPE h
-
jQuery实现带延迟的二级tab切换下拉列表效果
本文实例讲述了jQuery实现带延迟的二级tab切换下拉列表效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现带延时效果的下拉列表菜单,有动画效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-delay-show-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q
-
jquery实现初次打开有动画效果的网页TAB切换代码
本文实例讲述了jquery实现初次打开有动画效果的网页TAB切换代码.分享给大家供大家参考.具体如下: 这是一款初次打开有动画效果的网页TAB代码,只在第一次点击TAB菜单的时候,会显示动画,再次点击的时候就没有了,一个实用的网页选项卡效果,有需要的请下载吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-first-open-flash-style-tab-cha-codes/ 具体代码如下: <!DOCTYPE html PU
-
jQuery实现的一个tab切换效果内部还嵌有切换
大致效果如图 下面是代码:自己导入jQuery包. 样式: <style type="text/css"> body,ul,li,div,a{margin:0px;padding:0px;} body{margin-top:10px;margin-left:15px;} #all{border-left:1px solid #ccc;border-right:1px solid #ccc;border-bottom:1px solid #ccc;width:255px;}
-
jquery实现超简洁的TAB选项卡效果代码
本文实例讲述了jquery实现超简洁的TAB选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款超简洁的TAB选项卡,个人觉得有点太简单,简单的有点不习惯,美化修饰一下其实效果更好.实际上应该为点击过的TAB添加一个背景色,区分一下,这样比较好. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-easy-tab-cha-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C
-
使用vue.js写一个tab选项卡效果
通常我们写tab选项卡的时候,一般都是用jq等去操作dom,给同级元素移除active类,然后,给被点击元素添加active类,但是在vue.js中,我们能不去操作dom我们就尽量不操作dom,那么该如何实现呢? 如果使用过vue-router,那么你会发现,vue-router在使用的时候其实就相当于一个tab选项卡,在点击之后,被点击的router-link元素会默认被添加上一个router-link-active的类,我们只需要设置这个类的样式即可.(当然,router-link-acti
-
jquery实现的一个导航滚动效果具体代码
在做校园网视频网站的时候,首页有一个导航页面要实现滚动效果,有样例,但代码是在难弄懂,貌似网页设计这块还是只有自己的代码自己懂,索性就仿造别人的效果自己做了一个,大体上还行,看起来还是比较流畅的,不次于原作的幺. 现在先把代码拷贝到这里,以后再逐一简化修改: 实现滚动效果,脚本代码如下: 复制代码 代码如下: var all=0; var no=0; var s_width=0; $(document).ready(function(){ all=$('.slide').length; s_wi
-
jQuery实现移动端Tab选项卡效果
效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalab
-
Android自定义ViewPager实现个性化的图片切换效果
第一次见到ViewPager这个控件,瞬间爱不释手,做东西的主界面通通ViewPager,以及图片切换也抛弃了ImageSwitch之类的,开始让ViewPager来做.时间长了,ViewPager的切换效果觉得枯燥,形成了审美疲劳~~我们需要改变,今天教大家如何改变ViewPager切换时的效果,实现个性化的图片切换 看一下这样效果的图片切换: 是不是比传统的效果个性很多,嘿嘿~~其实很简单,学习完这篇文章,保证你可以自定义切换效果,做出各式各样的效果. 1.制作前的分析 观察下效果图,实际上
-
jQuery 如何实现一个滑动按钮开关
滑动开关按钮大家在各大网站都能见到,下面小编给大家分享一篇基于jquery实现的一个滑动按钮开关效果,感兴趣的朋友可以参考下实现代码. 先给大家展示下效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery做的滑动按钮开关</title> <link rel="sty
-
jQuery实现Tab选项卡切换效果简单演示
本文实例针对jQuery实现Tab选项卡切换效果进行了简单演示,完全是自己的思考实现过程,分享给大家供大家参考.具体如下: 起初我Html代码架子是这样的: <div class="tabs"> <ul> <li class="acss" data-box="#panel-1">标签1</li> <li class="bcss" data-box="#panel-