<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .hide{

            display: none;

        }

        .header{

            background-color: #eeeeee;

            height: 40px;

            width: 600px;

            margin: 0 auto;

        }

        .header .menu{

            float: left;

            border-right: 1px solid black;

            padding: 0 5px;

            line-height: 40px;

            cursor: pointer;

        }

        .content{

            height: 100px;

            border: 1px solid black;

            width: 600px;

            margin: 0 auto;

        }

        .active{

            background-color: #dddddd;

        }

    </style>

</head>

<body>

     <div class="header">

         <div class="menu" >菜单一</div>

         <div class="menu" >菜单二</div>

         <div class="menu" >菜单三</div>

     </div>

     <div class="content">

          <div class="hide" >内容一</div>

          <div class="hide" >内容二</div>

          <div class="hide" >内容三</div>

     </div>

<script src="../jquery-2.12.4.js"></script>

<script>

    $('.menu').click(function () {

        $(this).addClass('active');

        var tag = $(this).index();

        $('.content').children().eq(tag).removeClass('hide').siblings().addClass('hide')

    })

</script>

</body>

</html>

横向文本框 index获取索引 和 eq 实现的更多相关文章

  1. js 如何获取文本框中光标索引位置

    function getTxt1CursorPosition(){ var oTxt1 = document.getElementById("txt1"); var cursurP ...

  2. 横向文本框 cursor:pointer 出现手型

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

  3. Ajax - 异步处理（点击变成文本框并修改）

    效果: 对应的文档结构: Test.aspx 前台代码: 引入JQuery(jquery-1.8.3.min.js). 引入自己所写的JS代码(UserJS.js). <html xmlns=& ...

  4. jQuery获取及设置单选框、多选框、文本框内容

    获取一组radio被选中项的值 var item = $('input[@name=items][@checked]').val(); 获取select被选中项的文本 var item = $(&qu ...

  5. jQuery获取及设置单选框、多选框、文本框

    获取一组radio被选中项的值 var item = $("input[@name=items][@checked]").val(); 获取select被选中项的文本 var it ...

  6. js获取子节点和修改input的文本框内容

    js获取子节点和修改input的文本框内容 js获取子节点: $("#"+defaultPVItemId).children().eq(3); //获取某个选择器下的第四个子节点 ...

  7. Py3+PyQt5+Eric6:学习记录之第一天:点击按钮获取文本框的值并输出。

    一.使用qt designer拖拽界面. 使用qtdesigner拖拽界面:

  8. vue集成ckeditor富文本框，怎么获取CKEditor实例？

    CKEDITOR 版本5 ,vue集成形式 vue集成ckeditor富文本框,由于不是通过js创建的富文本对象,所以,无法取得实例对象,官方说明 官方在builds-->Getting and ...

  9. js/jquery获取文本框的值与改变文本框的值

    我们就用它来学习获取文本框的值及改变文本框的值. 代码如下 复制代码 <script>function get1(){ document.getElementById("txtb ...

随机推荐

  1. 为什么ubuntu窗口语言选择中文后，中文字体反而变丑了？

    首先出现这个问题是因为ubuntu在更新语言包后,会安装ukai和uming两个字体,不知道为啥ubuntu要这样设计,反正挺烦人的,又丑又不清楚,把这两个卸掉就行了 sudo apt-get rem ...

  2. 用压测模拟并发、并发处理(synchronized,redis分布式锁)

    使用工具:Apache an 测压命令: ab -n 100 -c 100 http://www.baidu.com -n代表模拟100个请求,-c代表模拟100个并发,相当于100个人同时访问 ab ...

  3. IDEA12使用初体验

    最近将开发工具IDEA升级到了12.0版本,被它新的UI界面深深吸引,看下面,很酷哦~ 一.下载安装 在IDEA官网下载最近版本12.0,有免费的社区版,还有收费的无限制版,大家可以自行下载. 下载后 ...

  4. 【LeetCode 225_数据结构_栈_实现】Implement Stack using Queues

    class Stack { public: // Push element x onto stack. void push(int x) { int len = nums.size(); nums.p ...

  5. STL标准库-容器-map和multimap

    技术在于交流.沟通,本文为博主原创文章转载请注明出处并保持作品的完整性 map与multimap为关联容器,结构如下 map底层实现依然是rb_tree 他的data可以改,但是key不能改,因此ma ...

  6. APP界面框架初窥---标签导航

    标签导航是十大界面框架设计里最常用的界面框架设计,也是被业界之内公认的一种普遍使用的页面框架设计.那么这种页面框架设计在作业方面对一个用户来说也是最常见的一种页面框架设计,比如说微博.微信.手机百度. ...

  7. python 读写西门子PLC 包含S7协议和Fetch/Write协议，s7支持200smart，300PLC，1200PLC，1500PLC

    本文将使用一个gitHub开源的组件技术来读写西门子plc数据,使用的是基于以太网的TCP/IP实现,不需要额外的组件,读取操作只要放到后台线程就不会卡死线程,本组件支持超级方便的高性能读写操作 nu ...

  8. Winform开发常用控件之ComboBox、ListBox

    ComboBox就是我们常见的下拉框,对于此类控件,我们最关心的当然是数据的绑定和选择值得获取. 首先介绍个属性DropDownStyle,如果不允许ComboBox输入值,只能选择,就选DropDo ...

  9. 在Windows中配置Rsync同步

    Rsync是一款不错的文件免费同步软件,可以镜像保存整个目录树和文件系统,同时保持原来文件的权限.时间.软硬链接.第一次同步时 rsync 会复制全部内容,下次只传输修改过的文件部分.传输数据过程中可 ...

  10. BZOJ3296：Learning Languages（简单并查集）

    3296: [USACO2011 Open] Learning Languages Time Limit: 5 Sec  Memory Limit: 128 MBSubmit: 436  Solved ...