基于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 相关文章推荐
解决jquery异步按一定的时间间隔刷新问题
Dec 10 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
Jun 24 Javascript
js获取当前页面的url网址信息
Jun 12 Javascript
jQuery实现鼠标划过展示大图的方法
Mar 09 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
Aug 15 Javascript
js图片跟随鼠标移动代码
Nov 26 Javascript
ajax接收后台数据在html页面显示
Feb 19 Javascript
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
Apr 08 Javascript
详解Webpack-dev-server的proxy用法
Sep 08 Javascript
小程序绑定用户方案优化小结
May 15 Javascript
Vue中 axios delete请求参数操作
Aug 25 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
如何在PHP中读写文件
2020/09/07 PHP
ECMAScript 基础知识
2007/06/29 Javascript
jquery提示 &quot;object expected&quot;的解决方法
2009/12/13 Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
2011/07/08 Javascript
js获取图片大小的函数代码
2011/09/20 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
2014/06/05 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
2015/06/23 Javascript
jQuery实现的手风琴侧边菜单效果
2017/03/29 jQuery
xmlplus组件设计系列之分隔框(DividedBox)(8)
2017/05/02 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
2017/07/10 Javascript
vue中使用cropperjs的方法
2018/03/01 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
VUE组件中的 Drawer 抽屉实现代码
2019/08/06 Javascript
微信小程序自定义modal弹窗组件的方法详解
2020/12/20 Javascript
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
[03:01]2014DOTA2国际邀请赛 小组赛7月13日TOPPLAY
2014/07/14 DOTA
[01:35]2018年度CS GO最佳战队-完美盛典
2018/12/17 DOTA
简述Python中的面向对象编程的概念
2015/04/27 Python
Python对列表去重的多种方法(四种方法)
2017/12/05 Python
解决pycharm 误删掉项目文件的处理方法
2018/10/22 Python
深入解析Python小白学习【操作列表】
2019/03/23 Python
python 实现在tkinter中动态显示label图片的方法
2019/06/13 Python
Django上使用数据可视化利器Bokeh解析
2019/07/31 Python
Python 网络编程之UDP发送接收数据功能示例【基于socket套接字】
2019/10/11 Python
keras的ImageDataGenerator和flow()的用法说明
2020/07/03 Python
HTML5 Blob 实现文件下载功能的示例代码
2019/11/29 HTML / CSS
幼师自我鉴定
2014/02/01 职场文书
竞选班长演讲稿400字
2014/08/22 职场文书
井冈山红色之旅感想
2014/10/07 职场文书
学生会生活部工作总结2015
2015/03/31 职场文书
党风廉政教育心得体会2016
2016/01/22 职场文书
2016年安全生产先进个人事迹材料
2016/02/29 职场文书
Pytorch 中net.train 和 net.eval的使用说明
2021/05/22 Python
MySQL中存储时间的最佳实践指南
2021/07/01 MySQL
nginx的zabbix 5.0安装部署的方法步骤
2021/07/16 Servers
阿里云服务器部署mongodb的详细过程
2021/09/04 MongoDB