jQuery+CSS实现的标签页效果示例【测试可用】


Posted in jQuery onAugust 14, 2018

本文实例讲述了jQuery+CSS实现的标签页效果。分享给大家供大家参考,具体如下:

CSS代码:

#tabs{
  width:600px;
  height:250px;
  background:white;
  margin:20px;
}
#tabs ul{
  float:left;
  margin:20px 0 0 20px;
  padding:0;
}
#tabs li{
  width:80px;
  height:40px;
  line-height:40px;
  display:inline-block;
  text-align:center;
  border-bottom:1px solid grey;
  border-top-left-radius:5px;
  border-top-right-radius:5px;
  background:#eeeeee;
  position:relative;
  top:1px;
}
#tabs li:hover{
  color:#aaaaaa;
  cursor:pointer;
}
.items{
  width:560px;
  height:175px;
  font-size:16px;
  text-align:center;
  border:1px solid grey;
  float:left;
  margin-left:20px;
}

jQuery代码:

$(document).ready(function(){
  $("li").bind("click",function(){
    $(".items").hide();
    $("#"+$(this).attr("name")).show();
    $("li").css({
      "border-top":"1px solid white",
      "border-left":"1px solid white",
      "border-right":"1px solid white",
      "border-bottom":"1px solid grey",
      "background":"#eeeeee"
    });
    $(this).css({
      "border-top":"1px solid grey",
      "border-left":"1px solid grey",
      "border-right":"1px solid grey",
      "border-bottom":"1px solid white",
      "background":"white"
    });
  });
  $("li:first-child").click();
});

HTML部分代码:

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<div id="tabs">
  <ul>
    <li name="lst1">标签1</li>
    <li name="lst2">标签2</li>
    <li name="lst3">标签3</li>
    <li name="lst4">标签4</li>
  </ul>
  <div class="items" id="lst1">内容1</div>
  <div class="items" id="lst2">内容2</div>
  <div class="items" id="lst3">内容3</div>
  <div class="items" id="lst4">内容4</div>
</div>

这里使用在线HTML/CSS/JavaScript前端代码调试运行工具:http://tools.3water.com/code/WebCodeRun,测试运行效果如下:

jQuery+CSS实现的标签页效果示例【测试可用】

感兴趣的朋友可以动手测试一下看看效果如何。

PS:或者还可以将上述代码组合成完成的HTML页面,再使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun,测试运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
jQuery实现frame之间互通的方法
Jun 26 jQuery
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
使用 jQuery 实现表单验证功能
Jul 05 jQuery
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
JQuery通过后台获取数据遍历到前台的方法
Aug 13 #jQuery
jQuery实现图片简单轮播功能示例
Aug 13 #jQuery
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 #jQuery
jQuery中$原理实例分析
Aug 13 #jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 #jQuery
jQuery的Ajax接收java返回数据方法
Aug 11 #jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 #jQuery
You might like
PHP4实际应用经验篇(4)
2006/10/09 PHP
PHP中使用sleep造成mysql读取失败的案例和解决方法
2014/08/21 PHP
基于PHP+jQuery+MySql实现红蓝(顶踩)投票代码
2015/08/25 PHP
详解PHP序列化反序列化的方法
2015/10/27 PHP
PHP4和PHP5版本下解析XML文档的操作方法实例分析
2017/05/20 PHP
PHP中mysqli_get_server_version()的实例用法
2020/02/03 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
2012/08/24 Javascript
基于jquery创建的一个图片、视频缓冲的效果样式插件
2012/08/28 Javascript
jQuery之按钮组件的深入解析
2013/06/19 Javascript
Javascript中Event属性搜集整理
2013/09/17 Javascript
JS解析XML文件和XML字符串详解
2015/04/17 Javascript
jquery ztree异步搜索(搜叶子)实践
2016/02/25 Javascript
js实现小窗口拖拽效果
2016/12/03 Javascript
BootStrapTable服务器分页实例解析
2016/12/20 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
2016/12/22 Javascript
如何利用JQuery实现从底部回到顶部的功能
2016/12/27 Javascript
js制作可以延时消失的菜单
2017/01/13 Javascript
ReactNative页面跳转Navigator实现的示例代码
2017/08/02 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
2017/08/17 Javascript
vue slot 在子组件中显示父组件传递的模板
2018/03/02 Javascript
js实现简单分页导航栏效果
2019/06/28 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
2019/07/26 Javascript
详细解读Python的web.py框架下的application.py模块
2015/05/02 Python
python Spyder界面无法打开的解决方法
2018/04/27 Python
Python3实现的反转单链表算法示例
2019/03/08 Python
PyQt4编程之让状态栏显示信息的方法
2019/06/18 Python
python 爬取疫情数据的源码
2020/02/09 Python
Django:使用filter的pk进行多值查询操作
2020/07/15 Python
Python 串口通信的实现
2020/09/29 Python
利用python查看数组中的所有元素是否相同
2021/01/08 Python
北欧最好的童装网上商店:Babyshop
2019/09/15 全球购物
德国滑雪和户外用品网上商店:XSPO
2019/10/30 全球购物
利达恒信公司.NET笔试题面试题
2016/03/05 面试题
课改先进个人汇报材料
2014/01/26 职场文书
python3+PyQt5+Qt Designer实现界面可视化
2021/06/10 Python