<!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. wepy绘制雷达图

    代码如下: <style lang='less'> .radar-canvas2 { width: 690rpx; height: 420rpx; } </style> < ...

  2. LTE空口协议——是空口3GPP协议 不是网络IP协议

    [LTE基础知识]LTE空口协议分析 from:https://www.mscbsc.com/viewnews-102038.html控制面协议 控制面协议结构如下图所示. PDCP在网络侧终止于eN ...

  3. BZOJ2620 [Usaco2012 Mar]Haybale Restacking

    恩,非常好的题...至少思路非常巧妙 首先可以得到性质:对于相邻的两堆A & B,A给B然后B再给A是完全没有意义的...也就是说只能单向传递 然后我们记下每个点要给(被给)多少堆干草a[i] ...

  4. 关于将vector以及string传递给较老的api的问题

    现在可能STL使用的越来越多,但是一些较老的api并不支持例如vector这样的兑现,但是可以使用一些技巧来使其适应于这些函数. 例如对于使用到int*型的函数来说,传入一个 &vector[ ...

  5. 第12课：HTML基础之DOM操作1

    DOM(Document Object Model):文本对象模型 dom对象实际上是html页面转成成的文本对象,可以通过dom对象中js提供的方法找到htm中的各个标签. 练习URL:http:/ ...

  6. python多任务的导包问题

    多线程的使用: import threading def func(x): print(x) t= threading.Thread(target=func,args=(12,)) # 线程启动 t. ...

  7. 面试题总结（一）、TCP协议

    声明:本文主要探讨当TCP协议出现在面试笔试场合可能会涉及的问题,每一个知识点讨论力求简洁,便于记忆,但讨论深度有限,如要深入研究可点击参考链接,希望对正在找工作的同学有点帮助. 一.TCP协议简介 ...

  8. 历史上的重大软件BUG启示录第9篇---微软的硬件尝试

    (图片来源于网络) 2001年苹果公司发布第一代iPod,它的推出在当时引起了轰动,它拥有大容量存储空间和全新的操作方式,并且还非常漂亮(在当时看来),因此在市场上大受欢迎,苹果公司也因此赚的盆满钵满 ...

  9. linux磁盘分区格式化-fdisk命令工具

    本文主要讲述使用fdisk工具对磁盘进行分区和格式化的方法 首先要明确分区是针对磁盘进行的操做,磁盘分区会创建分区表,类似vda,sda的是磁盘,vda1,sda1的是分区 1.查看磁盘分区状态 1. ...

  10. HDU 1285：确定比赛名次（拓扑排序）

    确定比赛名次 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Subm ...