<!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. 毕业样本=[华威大学毕业证书]Warwick原件一模一样证书

    华威大学毕业证[微/Q:2544033233◆WeChat:CC6669834]UC毕业证书/联系人Alice[查看点击百度快照查看][留信网学历认证&博士&硕士&海归& ...

  2. CentOS7解决firefox无法启用ibus中文输入的问题

    最近换电脑,要换掉使用了6年的旧环境,开始折腾重装系统: 下了minimal版本的CentOS7.4,然后开始一点点装想用的东西,多少找到一点十年前折腾LFS的感觉:然后竟然被输入法拌住了半天,事后回 ...

  3. python使用sqlmap API检测SQL注入

    0x00前言: 大家都知道sqlmap是非常强大的sql注入工具,最近发现他有个sqlmap API,上网查了一下.发现这是 sqlmap的微端.(可以叫做sqlmap在线检测sql注入= =) 0x ...

  4. js操作中要去注意的一些问题

    1.js中注意问题 font-size 改成fontSize padding-top 改成paddingTop js中不认识-,所以要以小驼峰方式操作属性或者以[" "]方式,例[ ...

  5. 对图片进行索引，存入数据库sqlite3中，实现快速搜索打开

    对图片进行索引,存入数据库中,实现快速搜索打开    这个任务分为两步: 第一步:建立索引 import os import shutil import sqlite3 # 扫描函数,需扫描路径目录处 ...

  6. Python爬虫实践 -- 记录我的第二只爬虫

    1.爬虫基本原理 我们爬取中国电影最受欢迎的影片<红海行动>的相关信息.其实,爬虫获取网页信息和人工获取信息,原理基本是一致的. 人工操作步骤: 1. 获取电影信息的页面 2. 定位(找到 ...

  7. FreeSql 过滤器使用介绍

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

  8. 学习 JavaScript （七） 内存问题

    内存问题是 JavaScript 比较底层的东西,依葫芦画瓢学会了怎么使用变量,但是对于内存的概念依然模糊,今天让我们一起来了解一下内存在这门语言是怎么样的存在. 内存在不同类型的数值面前表现有很大的 ...

  9. C# ASP.NET MVC:使用Cookie记住账号密码

    MVC记住账号密码 使用cookie操作 前端: <div> 用户名:<input type="text" id="UserName" val ...

  10. layui,返回的数据不符合规范，正确的成功状态码 (code) 应为：0

    在使用layui的数据表格绑定数据的时候,出现的一些问题,  "返回的数据不符合规范,正确的成功状态码 (code) 应为:0" 之后在网上也查找的了许多的资料,也去看了官网的文档 ...