<!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. HttpResponse 类

    而封闭HTTP输出信息的类型就是HttpResponse类,使用HttpResponse类可以实现三种类型的输出,即文本,URL,二进制流.  实现这三类的属性和方法分别介绍如下:1.文本的输出,在日 ...

  2. 【Scipy】初步认识

    Scipy扩展包括多种多样的工具箱,这些工具致力于解决科学计算中的常见问题.不同的子模块对应不同的应用,比如插值, 整合, 优化, 图像处理, 统计, 特殊功能等等. scipy可以和其他的标准科学计 ...

  3. andorid 反编译

    1. 字节码文件转java文件 smali2java是一个将smali代码反编译成java代码的工具.什么是smali?smali是将Android字节码用可阅读的字符串形式表现出来的一种语言,可以称 ...

  4. 关于java的讲座有感

    今天晚上闲着看了下李兴华老师的java + 大数据 讲座.做一个屌爆的全能型技术人才,感觉有点收获,有兴趣的可以看看 链接地址:https://study.163.com/course/introdu ...

  5. 201621123006 《Java程序设计》第9周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 本次作业题集集合 List中指定元素的删除(题集题目) 1.1 实验总结.并回答:列举至少2种 ...

  6. DIY远程控制开关(tiny6410+LED+yeelink+curl)

    上一次,介绍了如何实现远程监控室内温度,大家伙反响还是很热烈的,笔者很欣慰,独乐乐不如众乐乐啊.不过话说回来,那个实现只能是远程监测家中温度,假如发现家里热得很,想远程打开空调开关提前降降温,回家后不 ...

  7. react native 获取 软键盘高度 和 新增软键盘的组件

    import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Keyboard, Te ...

  8. protel99 se中出现许多Backup of 文件，修改过保存时，总会出现备份文件，怎么才能取消这一设置？

    在file选项左边有个向下的大箭头标示 点开 有个prefereces项 点开之 把create backup项勾掉即可

  9. HDU 3746

    http://acm.hdu.edu.cn/showproblem.php?pid=3746 kmp的Nxet数组求字符串循环节例题 lenB%(lenB-Next[lenB])==0则其有周期len ...

  10. java日常知识点积累

    java类型中的普通非static方法 示例代码: package com.lvzhi; /** * Created by lvzhi on 2017/9/3 */ public class MyTh ...