基于jQuery实现选项卡效果


Posted in Javascript onJanuary 04, 2017

选项卡,不多说了,做不做网络的都知道,我学的比较晚,现在发一个选项卡制作的代码

效果下图所示:

基于jQuery实现选项卡效果

源代码:

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta name="keywords" content=" keywords" />
  <meta name="description" content="description" />
</head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
  body{font-size:13px}
  ul,li{margin:0;padding:0;list-style:none}
  #menu li{text-align:center;float:left;padding:5px;margin-right:2px;width:50px;cursor:pointer}
  #menu li.tabFocus{width:50px;font-weight:bold;background-color:#f3f2e7;border:solid 1px #666;border-bottom:0;z-index:100;position:relative}
  #content{width:260px;height:80px;padding:10px;background-color:#f3f2e7;clear:left;border:solid 1px #666;position:relative;top:-1px}
  #content li{display:none}
  #content li.conFocus{display:block}
</style>
<body>
<script type="text/javascript">
  $(function(){
    $('#menu li').each(function(index){
      $(this).click(function(){
        $('#menu li.tabFocus').removeClass('tabFocus');
        $(this).addClass('tabFocus');
        $('#content li:eq('+index+')').show().siblings().hide();
      })
    });
  });
</script>
<ul id="menu">
  <li class="tabFocus">家居</li>
  <li>电器</li>
  <li>二手</li>
</ul>
<ul id="content">
  <li class="conFocus">这是家居的内容</li>
  <li>这是电器的内容</li>
  <li>这是家居的内容</li>
</ul>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在html页面上拖放移动标签
Jan 08 Javascript
Dojo 学习要点
Sep 03 Javascript
js中判断对象是否为空的三种实现方法
Dec 23 Javascript
代码获取历史上的今天发生的事
Apr 11 Javascript
JavaScript实现在标题栏上显示当前日期的方法
Mar 19 Javascript
全面理解JavaScript中的闭包
May 12 Javascript
Servlet实现文件上传,可多文件上传示例
Dec 05 Javascript
详解Vue.js动态绑定class
Dec 20 Javascript
Angular2 之 路由与导航详细介绍
May 26 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
Jul 07 Javascript
原生js实现移动端触摸轮播的示例代码
Dec 22 Javascript
angularjs select 赋值 ng-options配置方法
Feb 28 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
Jan 04 #Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
Jan 04 #Javascript
jQuery实现联动下拉列表查询框
Jan 04 #Javascript
JavaScript中String对象的方法介绍
Jan 04 #Javascript
js select下拉联动 更具级联性!
Apr 17 #Javascript
基于JavaScript实现熔岩灯效果导航菜单
Jan 04 #Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
Jan 04 #Javascript
You might like
图书管理程序(二)
2006/10/09 PHP
采用PHP函数memory_get_usage获取PHP内存清耗量的方法
2011/12/06 PHP
PHP缓存技术的多种方法小结
2012/08/14 PHP
PHP生成RSS文件类实例
2014/12/05 PHP
php基于Snoopy解析网页html的方法
2015/07/09 PHP
javascript 常用代码技巧大收集
2009/02/25 Javascript
JS中setTimeout()的用法详解
2013/04/14 Javascript
jquery.messager.js插件导致页面抖动的解决方法
2013/07/14 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
2014/06/06 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
2014/12/15 Javascript
PHP实现的各种中文编码转换类分享
2015/01/23 Javascript
详解JS面向对象编程
2016/01/24 Javascript
基于vue2.0+vuex的日期选择组件功能实现
2017/03/13 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
2017/11/18 Javascript
Vue中添加手机验证码组件功能操作方法
2017/12/07 Javascript
vue.js中npm安装教程图解
2018/04/10 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
2018/06/14 Javascript
jquery分页优化操作实例分析
2019/08/23 jQuery
layer iframe 设置关闭按钮的方法
2019/09/12 Javascript
详解JavaScript中的this指向问题
2021/02/05 Javascript
Python栈类实例分析
2015/06/15 Python
Python多继承顺序实例分析
2018/05/26 Python
python感知机实现代码
2019/01/18 Python
使用WingPro 7 设置Python路径的方法
2019/07/24 Python
基于python纯函数实现井字棋游戏
2020/05/27 Python
python 实现朴素贝叶斯算法的示例
2020/09/30 Python
html5利用canvas绘画二级树形结构图的示例
2017/09/27 HTML / CSS
大学英语演讲稿(中英文对照)
2014/01/14 职场文书
自行车租赁公司创业计划书
2014/01/28 职场文书
化学工程专业求职信
2014/08/10 职场文书
2014年置业顾问工作总结
2014/11/17 职场文书
初婚初育证明范本
2015/06/18 职场文书
学校2016年全国助残日活动总结
2016/04/01 职场文书
详解nginx.conf 中 root 目录设置问题
2021/04/01 Servers
MySQL5.7并行复制原理及实现
2021/06/03 MySQL
聊聊SpringBoot自动装配的魔力
2021/11/17 Java/Android