<!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" a="1">菜单一</div>

         <div class="menu" a="2">菜单二</div>

         <div class="menu" a="3">菜单三</div>

     </div>

     <div class="content">

          <div class="hide" b="1">内容一</div>

          <div class="hide" b="2">内容二</div>

          <div class="hide" b="3">内容三</div>

     </div>

<script src="../jquery-2.12.4.js"></script>

<script>

    $('.menu').click(function () {

        $(this).addClass('active');

        var tag = $(this).attr('a');

        target = '.content [b=' + tag +']';

        $(target).removeClass('hide').siblings().addClass('hide')

    })

</script>

</body>

</html>

横向文本框 cursor:pointer 出现手型的更多相关文章

  1. <a>标签缺少href 属性，鼠标经过不会出现手型

    声明: web小白的笔记,欢迎大神指点.联系QQ:1522025433. 直接看实例吧! <!doctype html> <html> <head> <met ...

  2. 横向文本框 index获取索引 和 eq 实现

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 限制文本框只能输入数字或浮点数的JS脚步

    1.oninput,onpropertychange,onchange的用法 l          onchange触发事件必须满足两个条件: a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本 ...

  4. 手机浏览器浏览WebApp弹出的键盘遮盖住文本框的解决办法

    手机浏览器浏览WebApp弹出的键盘遮盖住文本框的解决办法 最近碰到Android微信内置浏览H5页面,因为其中的文本输入框(input)放置在靠近页面的中下方,点击文本框以后,则输入框会被弹出的手机 ...

  5. android 弹出的软键盘遮挡住EditText文本框的解决方案

    1.android 弹出的软键盘遮挡住EditText文本框的解决方案: 把Activit对应的布局文件filename.xml文件里的控件用比重设置布局.(例如:android:layout_wei ...

  6. 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

    原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...

  7. 微信内置浏览器浏览H5页面弹出的键盘遮盖文本框的解决办法（转）

    最近在做微信公众号的内嵌页面,发现点击输入框时键盘盖住文本框,找到一段代码解决了这个问题. iOS和android手机都已亲测,需要的可以直接拷贝到代码中使用. js代码如下: $(function ...

  8. bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题

    答案来自老外http://stackoverflow.com/questions/14795035/twitter-bootstrap-modal-blocks-text-input-field $( ...

  9. JS轻松实现单击文本框弹出选择日期

    我的开发工具是vs2005,你们可选择自己合适的开发工具 首先创建个文本框<input id="txFDate" name="txFDate" type= ...

随机推荐

  1. Linux终端界面屏保

    Linux终端界面屏保   在很多Linux使用者的认知里,都认为终端下的Linux操作界面是没有屏保的,只有像windows那样的图形界面下才有屏保.但是其实Linux下也是有屏保的,只不过是ASC ...

  2. java Cookie 获取历史记录列表（三）

    /** * 获取Cookie里面的东西 */ protected List<String> getCookieList() { Cookie[] cookies = null; Cooki ...

  3. POJ 2823 单调队列入门水题

    最最基础的单调队列题目.一个单增一个单减.还是可以借此好好理解一下单调队列的. #include <stdio.h> #include <string.h> #include ...

  4. IIS网页GZIP压缩

    1.开GZIP有什么好处? 答:Gzip开启以后会将输出到用户浏览器的数据进行压缩的处理,这样就会减小通过网络传输的数据量,提高浏览的速度. 2.如何启用IIS的Gzip压缩功能: 答:首先,如果你需 ...

  5. 【linux】linux无root权限安装包的一般流程

    apt-get source PACKAGE ./configure --prefix=$HOME/myapps make make install

  6. 词云：解决pip install wordcloud安装过程中报错“error: command 'x86_64-linux-gnu-gcc' failed with exit status 1”问题

    外部环境:ubuntu16.04, 64bits, 全局环境python2.7 在虚拟环境(python3.5)中执行 pip install wordcloud 时安装失败,报错: error: c ...

  7. python实现树结构

    树在计算机科学的许多领域中使用,包括操作系统,图形,数据库系统和计算机网络.树数据结构与他们的植物表亲有许多共同之处.树数据结构具有根,分支和叶.自然界中的树和计算机科学中的树之间的区别在于树数据结构 ...

  8. DELL E7240超极本

    一.图片展示 1.整体图 2.扩展坞的后卡槽附带挡板 3.电源线 4.边框指示灯 5.平躺展示摄像头 二.参数配置 1.i5的 2.i7的 3.手写 处理器:英特尔四代处理器    i7-4600U双 ...

  9. OLEDB操作Excel

    使用OLEDB操作Excel 的方法 OleDbConnection conn = null;            try            {              //fileName ...

  10. C#.NET通过Socket实现平行主机之间网络通讯（含图片传输的Demo演示）

    在程序设计中,涉及数据存储和数据交换的时候,不管是B/S还是C/S模式,都有这样一个概念:数据库服务器.这要求一台性能和配置都比较好的主机作为服务器,以满足数目众多的客户端进行频繁访问.但是对于一些数 ...