<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="utf-8">
 <title></title>
 <style>
  .clearfix:after{
   content: "";
   display: block;
   clear: both;
  }
   ul{
    list-style: none;
   }
   ul li{
    float:left;
    padding: 2px 5px;
    margin-right: 10px;
    background: indianred;
   }
     .hide{
    display: none;
   }
  .tab_box{
   width: 200px;
   height: 200px;
   border: 1px solid red;
  }
  .tab_box div{
   background: #CCCCCC;
  }
  .selected{
   background: green;
  }
 </style>
</head>
<body>
<div class="tab">
 <div class="tab_menu">
  <ul class="clearfix">
   <li class="selected">时事</li>
   <li>体育</li>
   <li>娱乐</li>
  </ul>
 </div>
 <div class="tab_box">
  <div>时事</div>
  <div class="hide">体育</div>
  <div class="hide">娱乐</div>
 </div>
</div>
</body>
<script src="js/jquery-1.11.3.js"></script>
<script>
  var $div_li=$("div.tab_menu ul li");
 $div_li.click(function(){
  $(this).addClass("selected")
   .siblings().removeClass("selected");
  var index=$div_li.index($(this));
  $("div.tab_box>div")
   .eq(index).show()
   .siblings().hide();
 });
</script>
</html>

Jquery 组 标签页的更多相关文章

  1. jquery实战---标签页效果

    在前面的博客中,小编主要简单的介绍了jquery的一些基本知识,今天这篇博文,小编继续来学习jquery的相关知识,今天我们来学习一个标签页的小例子,相关源码小编已经上传,有需要的小伙伴可以自己去下载 ...

  2. 实战Jquery(四)--标签页效果

            这两天完毕了实战四五六的样例,实例四是标签页的实现方法,实例五是级联菜单下拉框,实例六是窗体效果,都是web层经常使用的效果.越到后面越发认为技术这东西,就是一种思路的展现,懂了要实现 ...

  3. JQuery简单标签页实现

    <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...

  4. 类似Jquery ui 标签页(Tabs)

    <div class="indexnew_tit"> <a href="javascript:;" class="on"& ...

  5. 标签页（tab）切换的原生js,jquery和bootstrap实现

    概述 这是我在学习课程Tab选项卡切换效果时做的总结和练手. 原课程中只有原生js实现,jquery和bootstrap实现是我自己补上的. 本节内容 标签页(tab)切换的原生js实现 标签页(ta ...

  6. jquery插件之tab标签页或滑动门

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的tab标签页或滑动门特效,在此插件中默认使用的是鼠标滑过 ...

  7. jquery ui 常用（一）（自动完成 | 标签页 | 折叠面板 | 带图标的按钮 | 日期选择器| ）

    条件,引用3个文件 jquery-ui.min.css; jquery.min.js; jquery-ui.min.js. 一.自动完成 http://www.w3cschool.cc/jqueryu ...

  8. 如何一行jquery代码写出tab标签页（链式操作）

    啦啦!今天又学了一招,js写几十行的tab标签页jquery写一行就行啦,用到了链式操作!以下是代码: <!DOCTYPE html> <html lang="en&quo ...

  9. [置顶] JQuery实战总结三 标签页效果图实现

    在浏览网站时我们会看到当我们鼠标移到多个选项卡上时,不同的选项卡会出现自己对应的界面的要求,在同一个界面上表达了尽量多的信息.大大额提高了空间的利用率.界面的切换效果也是不错的哦,这次自己可以实现啦. ...

随机推荐

  1. yii2场景

    遇到的问题 起作用了但是使用create的时候,保存却出了问题,提示unknown scenarios:default 解决方法 后来找文章,是因为设置场景的时候,直接把父类的场景覆盖了.所以应该这样 ...

  2. 转 一个web项目web.xml的配置中<context-param>配置作用

    一个web项目web.xml的配置中<context-param>配置作用   <context-param>的作用:web.xml的配置中<context-param& ...

  3. 以太坊中的Ghost协议

    https://blog.csdn.net/t46414704152abc/article/details/81191804 写得超好,终于弄懂了什么是叔块,怎么确定哪条链最长,以太坊与比特币出块的差 ...

  4. sh脚本文件的运行

    sh脚本文件的运行mac终端下运行shell脚本 1.写好自己的 脚本,比如test-bash.sh 2.打开终端 执行,方法一: 输入命令 ./test-bash.sh , 方法二:直接把 aa.s ...

  5. 国产的骄傲，Deepin发布v15.9

    深度操作系统是一个致力于为全球用户提供美观易用.安全可靠的Linux发行版.深度操作系统基于Linux内核,以桌面应用为主的开源GNU/Linux操作系统,支持笔记本.台式机和一体机.深度操作系统(d ...

  6. Centos 7 KVM安装win10

    KVM架构: KVM 是基于虚拟化扩展(Intel VT 或者 AMD-V)的 X86 硬件的开源的 Linux 原生的全虚拟化解决方案.KVM 中,虚拟机被实现为常规的 Linux 进程,由标准 L ...

  7. node.js 基础一 安装

    1.下载 2.安装 3.查看版本 一 下载 下载地址:https://nodejs.org/zh-cn/download/ 二 安装 运行安装包:node-v8.9.2-x64.msi

  8. 免安装的Tomcat基本配置和安装

    大家都知道tomcat吧!因为Tomcat 技术先进.性能稳定,而且免费,因而深受Java 爱好者的喜爱并得到了部分软件开发商的认可,成为目前比较流行的Web 应用服务器,也是运行Servlet和JS ...

  9. odoo 订餐系统之消息提醒

    打算入手odoo开发新的系统,先研究下开发的过程是如何的.案例模仿自带的订餐系统,此系统模块不多,但很典型,可以达到联系的目的.先记录下订餐系统消息提醒的开发过程. 1.添加自己的addons目录my ...

  10. 《坦克世界》1.0+：使用 CPU 优化的图形和物理丰富用户体验

    本文以<坦克世界>为例,介绍 Wargaming 使用 CPU 多核和 CPU 单指令多数据 (SIMD) 功能显著提升游戏沉浸式体验的创新方法.我们以英特尔® 线程构建模块(英特尔® T ...