基于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 相关文章推荐
js 弹出菜单/窗口效果
Oct 30 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
Sep 02 Javascript
jQuery实现选项卡功能(两种方法)
Mar 08 Javascript
jquery 键盘事件的使用方法详解
Sep 13 jQuery
react native 文字轮播的实现示例
Jul 27 Javascript
原生JS实现简单的倒计时功能示例
Aug 30 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
Sep 28 Javascript
搭建基于express框架运行环境的方法步骤
Nov 15 Javascript
微信小程序实现banner图轮播效果
Jun 28 Javascript
Vue+Element实现动态生成新表单并添加验证功能
May 23 Javascript
jQuery实现带进度条的轮播图
Sep 13 jQuery
JS removeAttribute()方法实现删除元素的某个属性
Jan 11 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
深入分析使用mysql_fetch_object()以对象的形式返回查询结果
2013/06/05 PHP
PHP中echo和print的区别
2014/08/28 PHP
Javascript学习笔记二 之 变量
2010/12/15 Javascript
JavaScript中两个感叹号的作用说明
2011/12/28 Javascript
浏览器兼容console对象的简要解决方案分享
2013/10/24 Javascript
JavaSript中变量的作用域闭包的深入理解
2014/05/12 Javascript
使用typeof判断function是否存在于上下文
2014/08/14 Javascript
Javascript基础教程之JavaScript语法
2015/01/18 Javascript
DOM 高级编程
2015/05/06 Javascript
代码分析jQuery四种静态方法使用
2015/07/23 Javascript
JQuery实现左右滚动菜单特效
2015/09/28 Javascript
Document.body.scrollTop的值总为零的快速解决办法
2016/06/09 Javascript
简单快速的实现js计算器功能
2017/08/17 Javascript
jquery.picsign图片标注组件实例详解
2018/02/02 jQuery
js for终止循环 跳出多层循环
2018/10/04 Javascript
[42:52]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Cython 三分钟入门教程
2009/09/17 Python
ubuntu安装sublime3并配置python3环境的方法
2018/03/15 Python
Python中pandas dataframe删除一行或一列:drop函数详解
2018/07/03 Python
python中使用while循环的实例
2019/08/05 Python
python3 Scrapy爬虫框架ip代理配置的方法
2020/01/17 Python
Python logging日志库空间不足问题解决
2020/09/14 Python
Python尾递归优化实现代码及原理详解
2020/10/09 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
惠普美国官方商店:HP Official Store
2016/08/28 全球购物
Betsey Johnson官网:妖娆可爱的连衣裙及鞋子、手袋和配件
2016/12/30 全球购物
EJB实例的生命周期
2016/10/28 面试题
幼儿园春游活动方案
2014/01/19 职场文书
勤俭节约倡议书
2014/04/14 职场文书
爬山的活动方案
2014/08/16 职场文书
大学生学习计划书
2014/09/15 职场文书
丽江古城导游词
2015/02/03 职场文书
营销策划分析:怎么策划才能更好销量产品?
2019/09/04 职场文书
python开发实时可视化仪表盘的示例
2021/05/07 Python
python面向对象版学生信息管理系统
2021/06/24 Python
MYSQL 表的全面总结
2021/11/11 MySQL