<!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. IOS-网络(发送JSON数据给服务器和多值参数）

    三步走: 1.使用POST请求 2.设置请求头 [request setValue:@"application/json" forHTTPHeaderField:@"Co ...

  2. javascript垃圾收集

    javascript具有自动垃圾收集机制,也就是说,执行环境会负责管理代码执行过程中使用的内存.而在C和C++之类的语言中,开发人员的一项基本任务就是手工跟踪内存的使用情况 ,这是造成许多问题的一个根 ...

  3. spring boot 使用velocity模板（十六）

    (不要使用这种模板了,spring boot最新版已经不支持了.使用FreeMarker吧:http://blog.csdn.net/clementad/article/details/5194262 ...

  4. Android Studio 1.5 注解配置

    Project的build.gradle文件配置如下: // Top-level build file where you can add configuration options common t ...

  5. mysql 简单级联的学习

    数据库上面一直是我的弱项,昨天突然想到,简单的级联,即一个表中的列表删除了,另外一个依赖这个表的其他数据应该也会删除,当时想了下,可以根据外键来判断把其他表的数据给删除了,但是这样一来好像要必须知道其 ...

  6. PostgreSQL truncate table会释放索引的空间

    apple=# create table test(id integer, info text); CREATE TABLE apple=# insert into test select gener ...

  7. .net 面试题总结

    1. DataSet和DataReader的区别? DataReader:和数据库处于一直连接状态.只读只能向前读取,一次只能读取一行信息.DataReader每次只在内存中加载一条数据,内存占用少, ...

  8. ZetCode PyQt4 tutorial layout management

    !/usr/bin/python -*- coding: utf-8 -*- """ ZetCode PyQt4 tutorial This example shows ...

  9. 树的直径证明+HDU2196

    首先把无向图变成一棵树,直径肯定由叶子组成. 有以下两种情况: 第一种:经过根节点,则找两个最远的叶子肯定是直径,也就是B+D. 第二种:不经过根节点,则目标的两个叶子肯定有一个不为根的公共祖先,如红 ...

  10. 20155313 2016-2017-2 《Java程序设计》第八周学习总结

    20155313 2016-2017-2 <Java程序设计>第八周学习总结 教材内容学习 十四章 NIO与NIO2 1.认识NIO NIO使用频道(Channel)来衔接数据节点,在处理 ...