1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .hide{
  8.             display: none;
  9.         }
  10.         .header{
  11.             background-color: #eeeeee;
  12.             height: 40px;
  13.             width: 600px;
  14.             margin: 0 auto;
  15.  
  16.         }
  17.         .header .menu{
  18.             float: left;
  19.             border-right: 1px solid black;
  20.             padding: 0 5px;
  21.             line-height: 40px;
  22.             cursor: pointer;
  23.         }
  24.         .content{
  25.             height: 100px;
  26.             border: 1px solid black;
  27.             width: 600px;
  28.             margin: 0 auto;
  29.  
  30.         }
  31.         .active{
  32.             background-color: #dddddd;
  33.         }
  34.  
  35.     </style>
  36. </head>
  37. <body>
  38.      <div class="header">
  39.          <div class="menu" >菜单一</div>
  40.          <div class="menu" >菜单二</div>
  41.          <div class="menu" >菜单三</div>
  42.      </div>
  43.      <div class="content">
  44.           <div class="hide" >内容一</div>
  45.           <div class="hide" >内容二</div>
  46.           <div class="hide" >内容三</div>
  47.      </div>
  48. <script src="../jquery-2.12.4.js"></script>
  49. <script>
  50.     $('.menu').click(function () {
  51.         $(this).addClass('active');
  52.         var tag = $(this).index();
  53.         $('.content').children().eq(tag).removeClass('hide').siblings().addClass('hide')
  54.  
  55.     })
  56. </script>
  57. </body>
  58. </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. [转载]浏览器中输入url 并且按下回车之后发生了什么？

    解析URL 浏览器通过 URL 能够知道下面的信息: Protocol "http" 使用HTTP协议 Resource "/" 请求的资源是主页(index) ...

  2. R语言rJava包安装载入及JAVA环境配置

    rJava 包的安装与载入 一般文本分词的教程都会贴出: install.packages("rJava") library(rJava) 来引导我们装载rJava包,运行inst ...

  3. Linux:自动获取静态IP地址,清空iptable,修改selinux脚本

    自动获取静态IP地址,清空iptable,修改selinux脚本 环境:VMware 平台:centos6.8全新 功能: 1)应用ifconfig -a,route -n,cat /etc/reso ...

  4. webpack 提升90%的构建速度 HardSourceWebpackPlugin

    HardSourceWebpackPlugin 插件 不能提升第一次构建的速度,但对于第二次构建能提升99%的构建速度 第一次构建: 第二次: 提升了..,算不出来,反正就是很多啦~~~ npm in ...

  5. w3m使用小记

    By francis_hao    Mar 8,2017   w3m是一个基于文本的web浏览器和分页器,运行在unix和windows系统上. 可显示包含链接的超文本标记语言(HTML),显示效果如 ...

  6. iOS语法糖 简单却不那么简单

    转载作者 香蕉大大 (Github) 开发过程中我特别喜欢用语法糖,原因很简单,懒得看到一堆长长的代码,但是语法糖我今天无意中看到更有意思的玩法.这里暂时吧把今天新学到的知识点整理一下希望大家喜欢,如 ...

  7. 汉诺塔(Hanoi)——小小算法

    传送门: 袁咩咩的小小博客 汉诺(Hanoi)塔源于古印度,是非常著名的智力趣题,大意如下: 勃拉玛是古印度的一个开天辟地的神,其在一个庙宇中留下了三根金刚石的棒,第一 根上面套着64个大小不一的圆形 ...

  8. 系列文章--WF学习资料汇总

    学习WF当然是MSDN作为第一手材料,但是看完了一些基础的入门知识后,园子里的一些WF大牛们的系列文章就是很好的提高的材料了.在此,感谢他们,我真佩服他们有这样的耐心和良好的学习习惯. 以下就是我经常 ...

  9. StringUtils.isEmpty()和isBlank()的区别

    一.概述 两种判断字符串是否为空的用法都是在程序开发时常用的,相信不少同学在这种简单的问题上也吃过亏,到底有什么区别,使用有什么讲究,带着问题往下看. 二.jar包 commons-lang3-3.5 ...

  10. linux环境下maven的安装配置

    1.到官网下载maven,上传到服务器上 https://maven.apache.org/download.cgi 2.将压缩包上传服务器对应路径解压: tar -zxvf apache-maven ...