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 校验中国身份证号码实例详解
Apr 11 jQuery
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
jquery实现企业定位式导航效果
Jan 01 jQuery
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
jquery分页优化操作实例分析
Aug 23 jQuery
jQuery实现评论模块
Aug 19 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
解析PHP中的内存管理,PHP动态分配和释放内存
2013/06/28 PHP
PHP函数extension_loaded()用法实例
2015/01/19 PHP
10款实用的PHP开源工具
2015/10/23 PHP
php处理静态页面:页面设置缓存时间实例
2017/06/22 PHP
PHP基于pdo的数据库操作类【可支持mysql、sqlserver及oracle】
2018/05/21 PHP
用Laravel轻松处理千万级数据的方法实现
2020/12/25 PHP
Aster vs KG BO3 第一场2.19
2021/03/10 DOTA
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
2007/04/27 Javascript
减少访问DOM的次数提升javascript性能
2014/02/24 Javascript
动态加载JavaScript文件的两种方法
2016/04/22 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
2017/07/12 Javascript
zTree jQuery 树插件的使用(实例讲解)
2017/09/25 jQuery
JavaScript数据结构之单链表和循环链表
2017/11/28 Javascript
让网站自动生成章节目录索引的多个js代码
2018/01/07 Javascript
React中使用async validator进行表单验证的实例代码
2018/08/17 Javascript
详解处理Vue单页面应用SEO的另一种思路
2018/11/09 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
2019/07/24 Javascript
[04:16]DOTA2英雄梦之声_第09期_斧王
2014/06/21 DOTA
Python正则表达式常用函数总结
2017/06/24 Python
python+selenium实现163邮箱自动登陆的方法
2017/12/31 Python
TensorFlow2.1.0最新版本安装详细教程
2020/04/08 Python
详解CSS3中常用的样式【基本文本和字体样式】
2020/10/20 HTML / CSS
中国旅游网站:同程旅游
2016/09/11 全球购物
美国孕妇装购物网站:Motherhood Maternity
2019/09/22 全球购物
南京某公司笔试题
2013/01/27 面试题
经典演讲稿范文
2013/12/30 职场文书
自我鉴定怎么写
2014/01/12 职场文书
仓库文员岗位职责
2014/04/06 职场文书
活动总结报告格式
2014/05/09 职场文书
给公司的建议书范文
2014/05/13 职场文书
关于保护环境的建议书
2014/08/26 职场文书
我为党旗添光彩演讲稿
2014/09/10 职场文书
审计局2014法制宣传日活动总结
2014/11/01 职场文书
旷工检讨书大全
2015/08/15 职场文书
创业计划书之少年玩具店
2019/09/05 职场文书
mysql中关键词exists的用法实例详解
2022/06/10 MySQL