jquery tab切换
// if ($(this).hasClass('activeC')) {
// $(this).removeClass('activeC')
// } else {
// $('.nav-children div').removeClass('activeC')
// $(this).addClass('activeC')
// }
首先引入jquery.js
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--自动适应手机屏幕宽度的方法-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<link rel="stylesheet" href="css/index.css">
<script src="js/jquery-3.3.1.min.js"></script>
<title>****</title>
</head> <body style="background: #e6e6e6;">
<div class="content">
<div class="contentLeft">
<span class="contentT on">摄像头1</span>
<span class="contentT">摄像头2</span>
<span class="contentT">摄像头3</span>
<span class="contentT">摄像头4</span>
</div>
<div class="contentRight">
<div class="contentD active"> </div>
<div class="contentD "> </div>
<div class="contentD"> </div>
<div class="contentD"> </div>
</div>
</div>
</body>
<script>
$(document).ready(function () {
// tab切换
$(".contentT").off("click").on("click", function () {
var index = $(this).index();
$(this).addClass("on").siblings().removeClass("on");
$(".contentD").eq(index).addClass("active").siblings().removeClass("active");
});
})
</script> </html>
.content{
margin-top: 240px;
width: %;
display: flex;
}
.contentLeft{
width: %;
margin-right: 20px;
color: #;
text-align: center;
}
.contentT{
display: inline-block;
height: 60px;
line-height: 60px;
background: white;
width: %;
}
.contentT.on{
display: inline-block;
color: #8ec21f;
background: #e6e6e6;
}
.contentRight{
flex: ;
background: #e6e6e6;
margin-right: 20px;
}
.contentD{
display: none;
}
.contentD.active{
display: block;
}
jquery tab切换的更多相关文章
- jquery TAB切换小插件
//tab切换 ;(function($, window, document, undefined) { $.fn.tab = function(options) { var defaults = { ...
- jQuery的DOM操作实例（1）——选项卡&&Tab切换
一.原生JavaScript编写tab切换 二.jQuery编写tab切换 在用jQuery编写选项卡过程中,重要的事搞清楚 .eq() 和 .index() 的使用方法. .eq()是jQuery遍 ...
- jquery实现tab切换完整代码
代码如下,保存到html文件打开: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- Jquery tab 选项卡 无刷新切换
转载的 演示地址:http://www.freejs.net/demo/29/index.html 首页>>TAB标签>>jquery实现简单的Tab切换菜单(2013-09- ...
- jquery实现简单的Tab切换菜单
实现tab切换的主要html代码: <div class="container"> <ul class="tabs"> <li c ...
- jquery 回车切换 tab功能
挺有趣的,Jquery 回车切换tab功能的实现哦 <html> <head><!--jquery库.js--></head> <body> ...
- 一款jquery写出来的tab切换
当时做这个的时候,当前状态是不规则的,li对应的有3块内容,分别设定不同背景图片,只显示当前的一个背景,鼠标移上去的时候其余2个用background-position: -1000px 0px;来隐 ...
- jquery Tab默认情况下自动切换
<!DOCTYPE html><html lang="zh-CN"><head><meta http-equiv="Conten ...
- JQuery实现tab切换
JQuery实现tab切换: (jquery需要自己添加) <!DOCTYPE html> <html lang="en"> <head> &l ...
随机推荐
- 001-ADO.NET
Web.config <connectionStrings> <add name="connStr" connectionString="server= ...
- SSIS Hekaton In-Memory OLTP 【翻译一篇外国文章】
来自:http://www.itprotoday.com/microsoft-sql-server/important-new-features-sql-server-2014 Microsoft's ...
- REST framework---基于类的视图
一.程序设计 1.路由设计 from django.conf.urls import url from django.contrib import admin from app import view ...
- 修改tomcatlog输出等级
/usr/local/tomcat2/webapps/digital/WEB-INF/classes/log4j.properties log4j.properties配置如下(配置是转载): log ...
- Java 数据返回接口封装
enum StatusCode package com.lee.utils; public enum StatusCode { SUCCESS(20000, "成功"), FALL ...
- Eclipse插件：Spket
1,破解文件32bit不适用 java -jar spket-1.6.18.jar:
- pkuwc2019游记
填坑 为了打击胡吹瞎吹恶势力 具体考试情况略了 题解 Day1 D1T1 100分 状压dp 考虑用点的存在状态转移边的情况的思想 D1T2 100分 虚树+ntt 假设在最下方的斯坦纳树上统计答案, ...
- MyTests
目录 About Tests Selenium自动化测试 Pyppeteer Explain About Tests 扯淡!测试之瞎扯淡 Selenium自动化测试 什么是Selenium? Sele ...
- Java 新建excle文件并填充模版内容
Java 新建excle文件并填充模版内容 一.JAR import java.io.BufferedReader; import java.io.File; import java.io.FileI ...
- Spring中三种编程式事务的使用
引入事务管理器 @Autowired TransactionTemplate transactionTemplate; @Autowired PlatformTransactionManager tr ...