<!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. Spring学习笔记1——基础知识

    1.在java开发领域,Spring相对于EJB来说是一种轻量级的,非侵入性的Java开发框架,曾经有两本很畅销的书<Expert one-on-one J2EE Design and Deve ...

  2. linux下运行jar

    方式一: java -jar XXX.jar 特点:当前ssh窗口被锁定,可按CTRL + C打断程序运行,或直接关闭窗口,程序退出 那如何让窗口不锁定? 方式二: java -jar XXX.jar ...

  3. ARIMA模型——本质上是error和t-?时刻数据差分的线性模型！！！如果数据序列是非平稳的，并存在一定的增长或下降趋势，则需要对数据进行差分处理!ARIMA（p，d，q）称为差分自回归移动平均模型，AR是自回归， p为自回归项； MA为移动平均，q为移动平均项数，d为时间序列成为平稳时所做的差分次数

    https://www.cnblogs.com/bradleon/p/6827109.html 文章里写得非常好,需详细看.尤其是arima的举例! 可以看到:ARIMA本质上是error和t-?时刻 ...

  4. 让FireFox支持window.event属性

    场景描述: 在用户行为采集的过程中,需要侦听window下的event对象,根据事件类型做相应的过滤处理,但在firefox下window.event是未定义的: 问题分析: 要想获取event属性共 ...

  5. 平衡二叉树,AVL树之代码篇

    看完了第一篇博客,相信大家对于平衡二叉树的插入调整以及删除调整已经有了一定的了解,下面,我们开始介绍代码部分. 首先,再次提一下使用的结构定义 typedef char KeyType; //关键字 ...

  6. win32程序显示网页

    说是win32,实际程序中使用了atl的东西.所以新建win32程序时,记得勾选使用atl: 代码如下: #include "stdafx.h" #include "Wi ...

  7. gradle 代理设置

    可以对gradle全局设置变量,也可以针对单个项目进行配置. 只需要在.gradle目录下创建一个gradle.properties文件,文件中按照如下格式添加代理配置 systemProp.http ...

  8. Jmeter-配置元件

    CSV Data Set Config(CSV数据集配置) 参考:http://www.cnblogs.com/yanzhe/p/7728139.html DNS Cache Manager(DNS缓 ...

  9. 一行能装逼的JavaScript代码的延伸

    前段就是坑,入坑水真深. 先看看一个黑科技, 纳尼,这是什么东西. (!(~+[])+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+ ...

  10. Python + Djang+ Visual Studio Code（VSCode）

    使用 Visual Studio Code(VSCode)搭建简单的 Python + Django 开发环境 https://www.cnblogs.com/Dy1an/p/10130518.htm ...