<!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. 一个n*n 的方格，要从左上角走到右下角，一次只能往右或往下走一步，求算法得出所有走动的方法数。

    题目一:一个n*n 的方格,要从左上角走到右下角,一次只能往右或往下走一步,求算法得出所有走动的方法数. 分析:对于第(i,j)个格子,只有向右走一步到达或者向左走一步到达,dp(i,j) = d(i ...

  2. hadoop安装及注意事项

    一.hadoop安装及注意事项1.安装hadoop的环境,必须在你的系统中有java的环境.2.必须安装ssh,有的系统默认就安装,如果没有安装需要手动安装.    可以用yum install -y ...

  3. css之grid layout代码解释

    .wrapper { display: grid; grid-template-columns: repeat(3, 1fr);/*grid-template-columns CSS属性定义了网格列的 ...

  4. hdu 6154 CaoHaha's staff

    CaoHaha's staff Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)T ...

  5. <NET CLR via c# 第4版>笔记 第10章 属性

    10.1 无参属性 10.1.1 自动实现的属性 10.1.2 合理定义属性 属性可以只读或只写,而字段访问总是可读和可写的(一个例外是 readonly 字段仅在构造器中可写). 属性方法可能抛出异 ...

  6. vue.js 源代码学习笔记 ----- codegenEvents.js

    /* @flow */ const fnExpRE = /^\s*([\w$_]+|\([^)]*?\))\s*=>|^function\s*\(/ const simplePathRE = / ...

  7. IIS经典模式与集成模式

    在IIS7.0中Web应用程序有两种配置形式:经典和集成 经典模式 经典模式是为了与之前的版本兼容,使用ISAPI扩展来调用ASP.NET运行库,原先运行于IIS6.0下的Web应用程序迁移到IIS7 ...

  8. Ubuntu网络配置IP和DNS等，适用于14.04,16.04和17.10

    本文主要介绍Ubuntu系统的网络设置,包括IP,DNS和主机名等,适用于14.04,16.04和17.10等版本 ===============  完美的分割线 ================ = ...

  9. Linux系列：Linux中如何安装.rpm、.tar、.tar.gz和tar.bz2文件

    转载自:https://blog.csdn.net/lanxuezaipiao/article/details/21896579 我以下面三个包为例:(三个包都在/etc/opt下) A. examp ...

  10. C# 判断操作系统的位数

    判断操作系统的位数有一下几种方法: 1. 特征值IntPtr 2. WMI 1的实现如下: public static int GetOSInfo() { if (IntPtr.Size == 8) ...