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插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
jquery实现有过渡效果的tab切换
Jul 17 jQuery
jQuery+ajax实现用户登录验证
Sep 13 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
BBS(php &amp; mysql)完整版(六)
2006/10/09 PHP
mysql建立外键
2006/11/25 PHP
Destoon实现多表查询示例
2014/08/21 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
滚动经典最新话题[prototype框架]下编写
2006/10/03 Javascript
JS对URL字符串进行编码/解码分析
2008/10/25 Javascript
Jquery ui css framework
2010/06/28 Javascript
Jquery拖拽并简单保存的实现代码
2010/11/28 Javascript
JS基础之undefined与null的区别分析
2011/08/08 Javascript
parentElement,srcElement的使用小结
2014/01/13 Javascript
用jquery等比例控制图片宽高的具体实现
2014/01/28 Javascript
javascript批量修改文件编码格式的方法
2015/01/27 Javascript
深入探讨前端框架react
2015/12/09 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
2016/05/07 Javascript
基于JS实现类似支付宝支付密码输入框
2016/09/02 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
2016/12/02 Javascript
jQuery密码强度验证控件使用详解
2017/01/05 Javascript
微信小程序开发经验总结(推荐)
2017/01/11 Javascript
layer弹出层父子页面事件相互调用方法
2018/08/17 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
2018/08/30 Javascript
vue实现购物车抛物线小球动画效果的方法详解
2019/02/13 Javascript
vue中v-text / v-html使用实例代码详解
2019/04/02 Javascript
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
2019/12/01 Javascript
基于javascript的无缝滚动动画1
2020/08/07 Javascript
js前端对于大量数据的展示方式及处理方法
2020/12/02 Javascript
web.py在模板中输出美元符号的方法
2014/08/26 Python
python3的输入方式及多组输入方法
2018/10/17 Python
对django views中 request, response的常用操作详解
2019/07/17 Python
利用Python检测URL状态
2019/07/31 Python
tensorflow 变长序列存储实例
2020/01/20 Python
python进度条显示-tqmd模块的实现示例
2020/08/23 Python
python+selenium自动化实战携带cookies模拟登陆微博
2021/01/19 Python
远程学习的教学用品和家庭学习资源:Really Good Stuff
2020/04/27 全球购物
学习型家庭事迹材料
2014/12/20 职场文书
房产电话营销开场白
2015/05/29 职场文书