1. <!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. Vue.js项目脚手架构建

    vue.js文档:https://cn.vuejs.org/v2/guide/ 参考这个或者参考菜鸟教程也可以,不过还是那句话官网权威. 我这个主要是看相关的学习视频搭建的. 一.环境准备 环境准备( ...

  2. Nginx完美解决前后端分离端口号不同导致的跨域问题

    笔者在做前后端分离系统时,出现了很多坑,比如前后端的url域名相同,但是端口号不同.例如前端页面为:http://127.0.0.1/ , 后端api根路径为 http://127.0.0.1:888 ...

  3. 笔记二:常用的h5语义化标签

    0.前言: 所谓语义化标签就是一种 我们仅通过标签名就能判断出该标签内容的语义的标签,见名知意. 总结这部分内容,主要是为了能从繁琐的div嵌套div中,改成带有h5标签码.这样更有利于读写代码. 人 ...

  4. 编程实现类似Linux下cp功能

    MyCP的代码实现 一.题目要求: 编写MyCP.java 实现类似Linux下cp XXX1 XXX2的功能,要求MyCP支持两个参数: java MyCP -tx XXX1.txt XXX2.bi ...

  5. 监控虚拟机跟外部的tcp连接

    1.监控虚拟机跟外部的tcp连接,如果连接数超过阈值,就在FORWARD把ip DROP ,并且发送邮件 root@InternetGateway:~# cat /root/scripts/check ...

  6. SkylineGlobe 6.6 版本API更新

    TEPro6.6API更新 概述 API6.6 较6.5只做了微小的更新,您可以很容易的将6.5的应用程序移植为6.6版本的应用程序. C#环境中,修改步骤如下: 创建SGWorld66实例代替SGW ...

  7. 重装系统之win10不能进入bios界面

    原因 自Win10发布以来,新出厂的预装Win10的电脑都默认在UEFI模式下启动操作系统.UEFI启动是一种新的主板引导项,正被看做是有近20多年历史的BIOS 的继任者.顾名思义,快速启动是可以提 ...

  8. WPF中TreeView.BringIntoView方法的替代方案

    原文:WPF中TreeView.BringIntoView方法的替代方案 WPF中TreeView.BringIntoView方法的替代方案 周银辉 WPF中TreeView.BringIntoVie ...

  9. JXOI2018简要题解

    JXOI2018简要题解 T1 排序问题 题意 九条可怜是一个热爱思考的女孩子. 九条可怜最近正在研究各种排序的性质,她发现了一种很有趣的排序方法: Gobo sort ! Gobo sort 的算法 ...

  10. 【php增删改查实例】第十五节 - 用户管理模块（删除确认）

    假如有一天,用户找到你,说万一不小心手一抖,就点击了删除用户,不太好.能不能再误点的时候,再给个确认框,让用户进行二次确认. OK,用户是上帝.这边我们可以考虑用confirm方法进行开发. 参考代码 ...