jq切换面板
<!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切换面板的更多相关文章
- js面向对象实现切换面板
js面向对象的特点: 继承(inheritance):对象方法和属性的继承 多态(polymorphism):组件开发 抽象(abstract):抓住核心问题 封装(encapsulation):把功 ...
- jq 折面板+tab切换（自己封装的插件哦！！）
如上图所示的一个折面板效果+tab切换:最重要的js代码如下: 对于布局简单介绍下: hot_wrap_li 这个是带箭头的横条: Arrow 这个是箭头的div:hot_wrap_li_wrap 这 ...
- GUI记事本+切换面板1.1版
package com.niit.javagui; import java.awt.Color; import java.awt.MenuBar; import java.awt.event.Inpu ...
- jq 切换功能toggle
---恢复内容开始--- $(document).ready(function () { $(".jianjie").click(function () { $(this).tog ...
- angular 选中切换面板
此方法采用的是没有路由的方式: html5 代码: <div [hidden]="flag"> <li class="music-list-datail ...
- jq切换选择项
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- easyui源码翻译1.32--panel(面板)
前言 昨天发布了表格datagrid的翻译源码 ,easyui的许多插件有依赖关系 比如datagrid 的渲染需要panel.resizable.linkbutton.pagination 今 ...
- Jquery Accordion 折叠面板
属性 类型 默认值 active Boolean/Number/jQuery/Selector/Element 第一个面板 设定默认显示的面板.设置为 false 时默认不显示面板,需 collaps ...
- amazeui学习笔记--js插件（UI增强3）--折叠面板Collapse
amazeui学习笔记--js插件(UI增强3)--折叠面板Collapse 一.总结 注意点: 1.data-am-collapse:这个东西就是展开折叠事件 2.am-collapse(包括其下属 ...
随机推荐
- 服务网关基于RPC的用法
企业为了保护内部系统的安全性,内网与外网都是隔离的,企业的服务应用都是运行在内网环境中,为了安全的考量,一般都不允许外部直接访问.API网关部署在防火墙外面,起到一层挡板作用,内部系统只接受API网关 ...
- 有趣的8个IT冷知识
阅读本文大概需要 2.8 分钟. 想要成为一名成功的程序员,我们除了了解不同编程语言的设计思路,也应当了解编程的发展历史,从而判断未来的编程技术将走向何方.接下就为大家普及下计算机发展历程中的8个冷门 ...
- 从壹开始前后端分离 40 || 完美基于AOP的接口性能分析
旁白音:本文是不定时更新的.net core,当前主线任务的Nuxt+VueAdmin教程的 nuxt.js 之 tibug项目已上线,大家可以玩一玩:http://123.206.33.109:70 ...
- SpringBoot进阶教程(二十九)整合Redis 发布订阅
SUBSCRIBE, UNSUBSCRIBE 和 PUBLISH 实现了 发布/订阅消息范例,发送者 (publishers) 不用编程就可以向特定的接受者发送消息 (subscribers). Ra ...
- react native中使用echarts
开发平台:mac pro node版本:v8.11.2 npm版本:6.4.1 react-native版本:0.57.8 native-echarts版本:^0.5.0 目标平台:android端收 ...
- npm 模块化管理
我们要使用 npm 进行包管理,首先我们得安装 npm,怎么安装?其实只要你安装了 node,那便相当于安装了 npm: node下载地址:http://nodejs.cn/download/ 由于 ...
- OPPO X9007 升级到Android5.0 Color2.1（root版） 详细纪实
今天要做个测试,而测试APK刚好是要求最低5.0版本,正好手里有个老款手机OPPO X9007,而预装的系统是4.3,试了下虽然也能运行,但是主要功能不正常,毕竟人家APK最低要求摆在那. 反正这个手 ...
- 【English】20190428
It is of paramount importance that极为重要的一点[pærəmaʊnt] strategizing around SOA围绕soa制定战略 efficient gov ...
- 使用Swiper轮播插件引起的探索
提到Swiper轮播插件,小伙伴们应该不会感到陌生.以前我主要在移动端上使用,PC端使用较少. 注:这里需要注意的是,在PC端和移动端使用Swiper是不同的 官方给的版本有三个,分别是Swiper2 ...
- 0. VIM 系列 - 源码升级最新版本vim
卸载原来的vim: $ sudo apt-get remove --purge vim $ suso apt-get clean 下载最新版本源码: $ git clone https://githu ...