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元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
jquery 一键复制到剪切板的实例
Sep 20 jQuery
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
jQuery替换节点元素的操作方法
Mar 18 jQuery
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
jquery.pagination.js分页使用教程
Oct 23 jQuery
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
jQuery表单选择器用法详解
Aug 22 jQuery
JQuery使用数组遍历跳出each循环
Sep 01 jQuery
jQuery实现计算器功能
Oct 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蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
PHP函数之日期时间函数date()使用详解
2013/09/09 PHP
PHP按指定键值对二维数组进行排序的方法
2015/12/22 PHP
PHP创建word文档的方法(平台无关)
2016/03/29 PHP
JS关键字变色实现思路及代码
2013/02/21 Javascript
修改file按钮的默认样式实现代码
2013/04/23 Javascript
Javascript中Array.prototype.map()详解
2014/10/22 Javascript
Javascript控制input输入时间格式的方法
2015/01/28 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
2015/04/06 Javascript
JQuery中attr方法和removeAttr方法用法实例
2015/05/18 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
AngularJS控制器继承自另一控制器
2016/05/09 Javascript
移动端使用localResizeIMG4压缩图片
2017/04/22 Javascript
vue2里面ref的具体使用方法
2017/10/27 Javascript
JavaScript实现微信红包算法及问题解决方法
2018/04/26 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
2018/04/26 jQuery
Angular使用动态加载组件方法实现Dialog的示例
2018/05/11 Javascript
在vue中给列表中的奇数行添加class的实现方法
2018/09/05 Javascript
js前端如何写一个精确的倒计时代码
2019/10/25 Javascript
vue2.x数组劫持原理的实现
2020/04/19 Javascript
[01:46]新英雄登场
2019/09/10 DOTA
Python实现获取网站PR及百度权重
2015/01/21 Python
Python基于递归和非递归算法求两个数最大公约数、最小公倍数示例
2018/05/21 Python
python模拟实现斗地主发牌
2020/01/07 Python
python列表删除和多重循环退出原理详解
2020/03/26 Python
如何基于Python代码实现高精度免费OCR工具
2020/06/18 Python
大学生求职简历的自我评价范文
2013/10/12 职场文书
法律工作求职自荐信
2013/10/31 职场文书
医学生自我鉴定范文
2013/11/08 职场文书
财务经理的岗位职责
2013/12/17 职场文书
机电一体化专业求职信
2014/07/22 职场文书
妈妈活动方案
2014/08/15 职场文书
农民工工资支付承诺书
2015/05/04 职场文书
导游词之安徽九华山
2019/09/18 职场文书
导游词之广东佛山(南风古灶)
2019/09/24 职场文书
如何在CocosCreator里画个炫酷的雷达图
2021/04/16 Javascript