<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title></title>

    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>

    <style>

        ul {

            list-style: none;

        }

        .navbar_item {

            background-color: red;

            float: left;

            margin-left: 5px;

            width: 50px;

            height: 18px;

            text-align: center;

            color: white;

            font-weight: 700;

        }

        .bar_item_on {

            background-color: greenyellow;

            border: 3px solid black;

        }

        .tab_panel div {

            border: 1px solid black;

            width: 400px;

            height: 294px;

            margin: 2px 2px;

            float: left;

        }

    </style>

</head>

<body>

    <ul>

        <li class="navbar_item">1</li>

        <li class="navbar_item">2</li>

        <li class="navbar_item">3</li>

    </ul>

    <div style="clear: both; width:410px;height:300px;border:3px solid black" class="tab_panel">

        <div>

            面板1

        </div>

        <div>

            面板2

        </div>

        <div>

            面板3

        </div>

    </div>

</body>

</html>

<script>

    $(function () {

        $('.tab_panel>div').first().show().siblings().hide();

        var aLi = $('.navbar_item');

        aLi.on('click', function () {

            $(this).addClass('bar_item_on').siblings().removeClass('bar_item_on');

            var index = $(this).index();

            $('.tab_panel>div').eq(index).show().siblings().hide();

        });

    });

</script>

　　

jq切换面板的更多相关文章

  1. js面向对象实现切换面板

    js面向对象的特点: 继承(inheritance):对象方法和属性的继承 多态(polymorphism):组件开发 抽象(abstract):抓住核心问题 封装(encapsulation):把功 ...

  2. jq 折面板+tab切换（自己封装的插件哦！！）

    如上图所示的一个折面板效果+tab切换:最重要的js代码如下: 对于布局简单介绍下: hot_wrap_li 这个是带箭头的横条: Arrow 这个是箭头的div:hot_wrap_li_wrap 这 ...

  3. GUI记事本+切换面板1.1版

    package com.niit.javagui; import java.awt.Color; import java.awt.MenuBar; import java.awt.event.Inpu ...

  4. jq 切换功能toggle

    ---恢复内容开始--- $(document).ready(function () { $(".jianjie").click(function () { $(this).tog ...

  5. angular 选中切换面板

    此方法采用的是没有路由的方式: html5 代码: <div [hidden]="flag"> <li class="music-list-datail ...

  6. jq切换选择项

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

  7. easyui源码翻译1.32--panel(面板)

    前言 昨天发布了表格datagrid的翻译源码 ,easyui的许多插件有依赖关系  比如datagrid 的渲染需要panel.resizable.linkbutton.pagination   今 ...

  8. Jquery Accordion 折叠面板

    属性 类型 默认值 active Boolean/Number/jQuery/Selector/Element 第一个面板 设定默认显示的面板.设置为 false 时默认不显示面板,需 collaps ...

  9. amazeui学习笔记--js插件（UI增强3）--折叠面板Collapse

    amazeui学习笔记--js插件(UI增强3)--折叠面板Collapse 一.总结 注意点: 1.data-am-collapse:这个东西就是展开折叠事件 2.am-collapse(包括其下属 ...

随机推荐

  1. 深入理解pandas读取excel,txt,csv文件等命令

    pandas读取文件官方提供的文档 在使用pandas读取文件之前,必备的内容,必然属于官方文档,官方文档查阅地址 http://pandas.pydata.org/pandas-docs/versi ...

  2. FreeSql 过滤器使用介绍

    FreeSql.Repository 实现了过滤器,它不仅是查询时过滤,连删除/修改/插入时都会进行验证,避免数据安全问题. 过滤器 目前过滤器依附在仓储层实现,每个仓储实例都有 IDataFilte ...

  3. 什么是TensorFlow？

    前言 只有光头才能变强. 文本已收录至我的GitHub仓库,欢迎Star:https://github.com/ZhongFuCheng3y/3y 回顾前面: 从零开始学TensorFlow[01-搭 ...

  4. Python爬虫入门教程 38-100 教育部高校名单数据爬虫 scrapy

    爬前叨叨 今天要爬取一下正规大学名单,这些名单是教育部公布具有招生资格的高校名单,除了这些学校以外,其他招生的单位,其所招学生的学籍.发放的毕业证书国家均不予承认,也就是俗称的野鸡大学! 网址是 ht ...

  5. ifarme的自适应高度问题

    Html: <iframe id="iframeid" src="/Home/DisplayiIndex"></iframe> JS部分 ...

  6. Visual Studio动态生成版权信息

    Visual Studio动态生成版权信息 VS2008 1.1,类文件模板:在安装目录打开CS模板文件夹(D:\Program Files (x86)\Microsoft Visual Studio ...

  7. Mybatis插入数据返回主键ID

    <insert id="add" parameterType="com.dsa.core.base.model.ProductSync">      ...

  8. android---动画入门(一)

    android 动画分为两类,View Animation(视图动画)和property Animation(属性动画),View Animation(视图动画)包含了Tween Animation和 ...

  9. redis 安装-配置

    下载链接: wget http://download.redis.io/releases/redis-4.0.9.tar.gz ※ 如果没有  直接复制url 到浏览器下载 1:下载完成 2:解压 t ...

  10. windows系统以及linux系统的优缺点以及区别

    一.Linux以及Windows系统的优缺点对比   Windows Linux 优点 Windows Server系统相对于其他服务器系统而言,极其易用,极大降低使用者的学习成本. Linux系统是 ...