qikexun
qikexun

javascript实现tab切换的四种方法

总结了4种实现方法。

首先，写出tab的框架，加上最简单的样式，代码如下：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

 <html>

 <head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style>

 *{

 padding: 0;

 margin: 0;

 }

 li{

 list-style: none;

 float:left;

 }

 #tabCon{

 clear: both;

 }

 style>

 head>

 <body>

 <div id="tanContainer">

 <div id="tab">

 <ul>

 <li>标题一li>

 <li>标题二li>

 <li>标题三li>

 <li>标题四li>

 ul>

 div>

 <div id="tabCon">

 <div>内容一div>

 <div>内容二div>

 <div>内容三div>

 <div>内容四div>

 div>

 div>

 body>

 html>

现在的显示效果如下图：

四个tab标题和四个内容区都显示在了页面中，现在要实现tab切换效果，即点击标题一，内容一显示出来，其他内容不显示；点击标题二，内容二显示出来，其他内容不显示……
那么，整体思路很简单，给四个标题绑定事件，触发的时候对应的内容显示，其他的内容隐藏。

方法一：点击标题对应的内容显示，非点击标题对应的内容隐藏。代码如下：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <style>

 *{

 padding: 0;

 margin: 0;

 }

 li{

 list-style: none;

 }

 style>

 <script>

 function tab(pid){

 var tabs=["tab1","tab2","tab3","tab4"];

 for(var i=0;i<4;i++){

 if(tabs[i]==pid){

 document.getElementById(tabs[i]).style.display="block";

 }else{

 document.getElementById(tabs[i]).style.display="none";

 }

 }

 }

 

head>

 <body>

 <div id="tanContainer">

 <div id="tabNav">

 <ul>

 <li onclick="tab('tab1')">标题一li>

 <li onclick="tab('tab2')">标题二li>

 <li onclick="tab('tab3')">标题三li>

 <li onclick="tab('tab4')">标题四li>

 ul>

 div>

 <div id="tab">

 <div id="tab1">内容一div>

 <div id="tab2">内容二div>

 <div id="tab3">内容三div>

 <div id="tab4">内容四div>

 div>

 div>

 body>

 html>

方法二：先设置所有内容隐藏，然后点击标题对用的内容显示。代码如下：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

"Content-Type" content="text/html; charset=utf-8" />

"tanContainer">

"tab">

  • "changeTab('0')">标题一

  • "changeTab('1')">标题二

  • "changeTab('2')">标题三

  • "changeTab('3')">标题四

"tabCon">

"tabCon_0">内容一

"tabCon_1">内容二

"tabCon_2">内容三

"tabCon_3">内容四

方法三：显示和隐藏通过是有拥有class控制，先把所有的内容隐藏dispaly设为none，而该class的display设置为block，遍历所有标题节点和内容节点，点击标题后，该标题节点和对用的内容节点拥有class，其他的没有。zhao123.top代码如下：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style>

*{

padding: 0;

margin: 0;

}

li{

list-style: none;

float:left;

}

#tabCon {

clear: both;

}

#tabCon div {

display:none;

}

#tabCon div.fdiv {

display:block;

}

style>

head>

<body>

<div id="tanContainer">

<div id="tab">

<ul>

<li class="fli">标题一li>

<li>标题二li>

<li>标题三li>

<li>标题四li>

ul>

div>

<div id="tabCon">

<div class="fdiv">内容一div>

<div>内容二div>

<div>内容三div>

<div>内容四div>

div>

div>

body>

<script>

var tabs=document.getElementById("tab").getElementsByTagName("li");

var divs=document.getElementById("tabCon").getElementsByTagName("div");

 

for(var i=0;i<tabs.length;i++){

tabs[i].onclick=function(){change(this);}

}

 

function change(obj){

for(var i=0;i

if(tabs[i]==obj){

tabs[i].className="fli";

divs[i].className="fdiv";

}else{

tabs[i].className="";

divs[i].className="";

}

}

}

html>

该方法的缺点是，内容块的div下面不能再有div标签了。

方法四：不用js，用“input:checked”来做tab切换，先把所有的内容隐藏，被选中的内容显示。代码如下：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>input:checked实现tab切换title>

<style>

input{

opacity: 0;/*隐藏input的选择框*/

}

label{

cursor: pointer;/*鼠标移上去变成手状*/

float: left;

}

label:hover{

background: #eee;

}

input:checked+label{

color: red;

}

/*选择前面有.tabs input:nth-of-type(x):checked的.panels .panel:nth-child(x)*/

.tabs input:nth-of-type(1):checked~.panels .panel:nth-child(1),

.tabs input:nth-of-type(2):checked~.panels .panel:nth-child(2){

opacity: 1;

}

.panel{

opacity: 0;

position: absolute;/*使内容区域位置一样*/

}

style>

head>

<body>

<div class="tabs">

<input checked id="one" name="tabs" type="radio">

<label for="one">标题一label>

 

<input id="two" name="tabs" type="radio">

<label for="two">标题二label>

 

<div class="panels">

<div class="panel">

<p>内容一p>

div>

<div class="panel">

<p>内容二p>

div>

div>

div>

body>

html>

该方法的缺点是，不同区域切换只能通过点击。

你可能感兴趣的:(js)

  • 3.1-python爬虫之文件存储 Nosimper python爬虫学习笔记字符串列表pythoncsvjson
    系列文章目录python爬虫目录文章目录系列文章目录前言一、json文件处理1、什么是json2、JSON支持数据格式3、字典和列表转JSONpython对象转json字符串:dumpspython对象转json文件:dumpjson字符串转成Python对象：loadsjson文件转成Python对象：load二、csv文件处理1、什么是csv2、CSV读写操作python数据写到csv文件读取
  • Python文件操作(json、csv、tsv、excel、pickle文件序列化) herosunly 机器学习入门之工具篇Python新手快速入门python文件操作
      大家好，我是herosunly。985院校硕士毕业，现担任算法研究员一职，热衷于机器学习算法研究与应用。曾获得阿里云天池比赛第一名，CCF比赛第二名，科大讯飞比赛第三名。拥有多项发明专利。对机器学习和深度学习拥有自己独到的见解。曾经辅导过若干个非计算机专业的学生进入到算法行业就业。希望和大家一起成长进步。  本文主要介绍了Python文件操作(json、csv、tsv、excel、pickle
  • 推荐文章：轻触未来 —— 深度解析Angular Toggle Switch 喻建涛
    推荐文章：轻触未来——深度解析AngularToggleSwitchangular-toggle-switchAngularJSToggleSwitch项目地址:https://gitcode.com/gh_mirrors/an/angular-toggle-switch在数字化时代，用户体验的细腻之处往往成为应用脱颖而出的关键。今天，我们为您介绍一款专为AngularJS打造的精致开关组件——A
  • **让表单设计从未如此优雅——Vue Formly深度解析** 孙爽知Kody
    让表单设计从未如此优雅——VueFormly深度解析vue-formlyJavaScriptpoweredformsforVue.js项目地址:https://gitcode.com/gh_mirrors/vu/vue-formly在Web开发中，处理复杂的表单逻辑往往让人头疼。无论是数据验证还是界面的统一风格，都需要开发者花费大量精力来维护代码的一致性和效率。今天，我们要向大家推荐一个强大的表单
  • chrome游览器JSON Formatter插件无效问题排查，FastJsonHttpMessageConverter导致Content-Type返回不正确 chengpei147 chromejson前端javaspringboot
    问题描述chrome游览器又一款JSON插件叫JSONFormatter，游览器GET请求调用接口时，如果返回的数据是json格式，则会自动格式化展示，类似这样：但是今天突然发现怎么也格式化不了，打开一个json文件倒是可以格式化，但是请求接口返回json就是无法格式化问题原因反复卸载重装插件都没有解决，所以想到会不是接口返回的数据有问题，排查发现接口返回的ResponseHeaders中cont
  • firefox屏蔽debugger() dfh00l firefox前端
    有些网站为了防止调试,在js里加入很多debugger()语句,动态生成代码,定时执行.手动设置断点无效.解决方案,一种是在js编译的时候,直接内容替换把所有debugger()替换成空,还可以直接屏蔽debugger()语句,firefox里debugger()语句是单独一个断点类型(DebuggerStatement)源码:FIREFOX_118_0b8_RELEASE里修改是这样的diff-
  • MongoDB vs Redis：相似与区别 码畜sokach mongodbredis数据库
    前言在当今的数据库领域，MongoDB和Redis都是备受关注的非关系型数据库（NoSQL），它们各自具有独特的优势和适用场景。本文将深入探讨MongoDB和Redis的特点，并详细对比它们之间的相似之处和区别，帮助你更好地选择适合自己项目的数据库。一、MongoDB简介1.1什么是MongoDBMongoDB是一个面向文档的数据库管理系统，它使用BSON（BinaryJSON）格式存储数据。这种
  • 使用napi node_使用Napi / node-addon-api和Cmake的独立于Node.js版本的C ++ Native Addon weixin_26738395 vueViewUI
    使用napinodeThisisatutorialforc++Node-addon-api/Napiaddonusingcmake.Napimakesitindependentofnode.jsversion,meansouraddonwillbecompatiblewithallfutureversionofnode.js.Cmakeisacross-platformcodecompilingt
  • BPMN.js详解 GISer_Jinger Javascript前端基础项目javascript开发语言ecmascript
    bpmn.js是一个基于JavaScript的开源库，它允许开发者在Web应用程序中创建、查看和编辑BPMN2.0流程图。以下是对bpmn.js的详细解析：一、基本概念与功能定义：bpmn.js是bpmn-io团队开发的一个JavaScript库，它专注于BPMN（业务流程模型和标记法）2.0标准的实现。主要功能：渲染BPMN图表：bpmn.js能够将BPMN2.0的XML文件渲染成SVG格式的图
  • 华为OD机试E卷 - 最优资源分配/芯片资源占用（Java & Python& JS & C++ & C ） 算法大师 最新华为OD机试华为华为od华为OD机试E卷pythonjavajavascriptc++
    最新华为OD机试真题目录：点击查看目录华为OD面试真题精选：点击立即查看题目描述某块业务芯片最小容量单位为1.25G，总容量为M*1.25G，对该芯片资源编号为1，2，…，M。该芯片支持3种不同的配置，分别为A、B、C。配置A：占用容量为1.25*1=1.25G配置B：占用容量为1.25*2=2.5G配置C：占用容量为1.25*8=10G某块板卡上集成了N块上述芯片，对芯片编号为1，2，…，N，各
  • 华为OD机试 - 微服务的集成测试（Java & Python& JS & C++ & C ） 算法大师 最新华为OD机试华为华为OD华为od华为机试算法
    最新华为OD机试真题目录：点击查看目录华为OD面试真题精选：点击立即查看题目描述现在有n个容器服务，服务的启动可能有一定的依赖性（有些服务启动没有依赖），其次服务自身启动加载会消耗一些时间。给你一个nxn的二维矩阵useTime，其中useTime[i][i]=10表示服务i自身启动加载需要消耗10suseTime[i][j]=1表示服务i启动依赖服务j启动完成useTime[i][k]=0表示服
  • 【HarmonyOS Next NAPI 深度探索2】N-API 的工作机制与架构 轻口味 HarmonyOSNextNAPI深度探索harmonyosnapicC++harmonyosnextharmonyos-next
    【HarmonyOSNextNAPI深度探索2】N-API的工作机制与架构如果你听说过N-API，但还不太了解它的作用和背后的工作机制，那这篇文章会帮你捋清楚它的结构和原理。N-API是Node.js提供的一个强大工具，专门用于开发高性能、可维护的原生模块。接下来，我们一起看看N-API是如何工作的，它的架构是怎样的。什么是N-APIN-API，全称是Node.jsNativeAPI，是一个用来开
  • react.js 监听页面滚动事件 伟大的python程序员 react.jsreact.js
    componentDidMount(){window.addEventListener('scroll',this.handleScroll);}handleScroll=(event)=>{//滚动条高度letctx=this;letclientHeight=document.documentElement.clientHeight;//可视区域高度letscrollTop=document.d
  • 创建自定义全局指令 yqcoder 前端javascript开发语言
    1.创建文件夹mycli、mycli/bin2.创建文件mycli/bin/index.js3.在mycli文件目录下运行命令npminit-y生成package.json{ "name":"mycli", "version":"1.0.0", "main":"index.js", "bin":{  "mycli":"bin/index.js" }, "scripts":{  "test":"ec
  • Node CLI 之 Commander.js (1) 史一试 脚手架javascript开发语言ecmascript
    官网地址：https://github.com/tj/commander.js/blob/f1ae2db8e2da01d6efcbfd59cbf82202f864b0c1/Readme_zh-CN.mdCommander.js是node.js命令行界面的完整解决方案开始新建一个node工程执行npminstallcommanderpackage.json中新增代码添加#!/usr/bin/envn
  • 使用commander创建自定义命令行工具 van_95
    准备工作1.安装node.js,在官网下载即可,利用node.js的打包工具npm开始第一步.首先创建一个demo文件夹（名称自定义）第二步.在demo文件夹中创建一个bin文件夹,在bin文件夹下创建一个demo.js,然后在js中写下如下代码#!/usr/bin/envnodeconsole.log('demoisrun')第三步.使用cmd命令行，进入demo所在的文件夹下，然后输入命令np
  • Python基础 - 发起http请求 shawn.zhang. pythonjavaajaxjsoncurl
    目录[-]1、Python发起http请求#!/usr/bin/envpython#coding=utf-8#licenseremovedfor******importrospyimportpycurlimportStringIOimporturllibfromstd_msgs.msgimportStringimportjsonimporthashlibfromcyber_msgs.msgimpo
  • java常见单词汇总3（非常使用哦） 糟糕透了的都精彩极了 学习javajava常用英文单词
    JSP中常用英文URL:UniversalResourceLocation:统一资源定位符IE:InternetExplorer因特网浏览器JSP:javaserverpage.java服务器页面Model:模型View:视图C:controller:控制器Tomcat:一种jsp的web服务器WebModule:web模块Servlet:小服务程序Request:请求Response:响应Ini
  • node.js使用commander包构建命令行应用 crayon-shin-chan surprisenode.jstypescriptjavascriptnodejs
    仓库：https://github.com/tj/commander.js1.简介commander是node.js命令行接口的完整解决方案。2.安装npminstallcommander3.开始使用Commander导出一个全局对象，这对于快速程序很方便。为了简洁起见，在本自述文件的示例中使用了此方法。const{program}=require('commander');program.ver
  • vue局域网内访问 Simorel 前端vue局域网访问
    为了能在公司局域网内访问vue项目需要配置vue项目配置vue.config.jsmodule.exports={devServer:{/**为了在局域网内访问修改host*/host:'0.0.0.0',},};win10配置
  • JS在HTML页面内动态创建SVG元素 一粒马豆 html5JavaScript数据可视化SVGJSD3WEB
    最近在学习数据可视化，深入了解了如何在网页上实现数据的动态可视化。比如D3.JS主要应用JS在HTML页面内动态生成SVG元素并绑定数据。以下是我的例程：//通过createElementNS创建svg元素并设置属性varsvg=document.createElementNS('http://www.w3.org/2000/svg','svg');svg.setAttribute("style"
  • three.js中文字符随机生成旋转动画 一粒马豆 javascriptthree.js中文字符动画
    Three.js随机中文字符生成旋转动画body{margin:0;}canvas{display:block;}{"imports":{"three":"https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js","three/addons/":"https://cdn.jsdelivr.net/npm/[email protected]
  • 【华为OD-E卷 - VLAN资源池 100分（python、java、c++、js、c）】 CodeClimb 算法题华为od（A+B+C+D+E卷）收录分享java华为odpythonc++javascript
    【华为OD-E卷-VLAN资源池100分（python、java、c++、js、c）】题目VLAN是一种对局域网设备进行逻辑划分的技术，为了标识不同的VLAN，引入VLANID(1-4094之间的整数)的概念。定义一个VLANID的资源池(下称VLAN资源池)，资源池中连续的VLAN用开始VLAN-结束VLAN表示，不连续的用单个整数表示，所有的VLAN用英文逗号连接起来。现在有一个VLAN资源池
  • Commander 一款命令行自定义命令依赖 yqcoder arcgisjavascript前端node.js
    一、安装`commander`插件npminstallcommander二、基本用法1.创建一个简单的命令行程序创建一个JavaScript文件，例如`mycli.js`，并添加以下代码：//引入`commander`模块并获取`program`对象。const{program}=require("commander");program .version("1.0.0")//设置命令行工具的版本 
  • vue 无法 局域网内访问 m0_75101866 开发工具vue.js
    资料Vue项目设置可以局域网访问_vue.js_脚本之家过程上午，前端vue服务能够在局域网内访问，下午就不行了，但是后端服务能够正常访问，本机也能正常访问ip：端口号前端服务判定不是下面的问题：同一局域网下访问vue项目_vue在局域网内访问-CSDN博客然后，关闭防火墙尝试。。-_-!netshadvfirewallfirewalladdrulename="Allow8080"dir=inac
  • 微信小程序部分用户报错ERR_CONNECTION_REFUSED连接被拒绝 木雷双雄7 微信小程序微信小程序
    【问题描述】部分微信小程序用户出现连接被拒绝的错误，报错信息为{"code":0,"message":"{\"errno\":600001,\"errMsg\":\"request:failerrcode:-102cronet_error_code:-102error_msg:net::ERR_CONNECTION_REFUSED\"}"}【问题排查】后端没有错误日志，前端没有js报错，那报错从何
  • Python使用socket传输对数据AES和MD5加密 夜语醉星辰 Pythonpython
    一、使用socket通信defclient_communication(data):#通信host="127.0.0.1"#服务器IP地址port=12345#服务器端口号#处理发送数据data=json.dumps(data)#将字典转换为json字符串data=encryption_AES(data)#加密数据try:client_socket=socket.socket(socket.AF_
  • Element table 表头吸顶效果（适用于表头无fixed属性使用） 阳光的男夹克 Vue2javascript开发语言ecmascript
    在main.js自定义sticky指令Vue.directive('sticky',{//当被绑定的元素插入到DOM中时……inserted(el,binding){//获取表格constthead=el.children[1]consttbody=el.children[2]//获取滚动元素constscrollParent=document.querySelector(binding.valu
  • python程序发钉钉消息 乌11111 python
    参考：使用python通过接口方式发送钉钉消息分两步：1.在钉钉群---智能群助手里添加机器人，拿到webhook链接，设置关键词。2.写python代码，用requests请求接口的方式。参考代码和实现结果如下。#python发钉钉消息importjson,requestsdefsendDing(msg):dingding_url='https://oapi.dingtalk.com/robot
  • 学习TypeScript（一） 家里有只小肥猫 学习typescriptjavascript
    Ts静态类型可以直接在编译器进行类型检查js动态类型在代码执行期的时候才会进行类型检查好处优势程序中任何位置的代码都会有错误提示，避免浪费时间提高维护性让代码重构更容易只需要修改类型就可以全局安装打开cmd电脑全局安装npmi-gtypescript检查是否安装成功tsc-vTypeScript入门教程1.安装TypeScriptnpminstall-gtypescript2.创建TypeScri
  • web前段跨域nginx代理配置 刘正强 nginxcmsWeb
    nginx代理配置可参考server部分 server {         listen       80;         server_name  localhost;
  • spring学习笔记 caoyong spring
    一、概述     a>、核心技术 : IOC与AOP b>、开发为什么需要面向接口而不是实现     接口降低一个组件与整个系统的藕合程度，当该组件不满足系统需求时，可以很容易的将该组件从系统中替换掉，而不会对整个系统产生大的影响 c>、面向接口编口编程的难点在于如何对接口进行初始化,(使用工厂设计模式)
  • Eclipse打开workspace提示工作空间不可用 0624chenhong eclipse
    做项目的时候，难免会用到整个团队的代码，或者上一任同事创建的workspace， 1.电脑切换账号后，Eclipse打开时，会提示Eclipse对应的目录锁定，无法访问，根据提示，找到对应目录，G:\eclipse\configuration\org.eclipse.osgi\.manager，其中文件.fileTableLock提示被锁定。 解决办法，删掉.fileTableLock文件，重
  • Javascript 面向对面写法的必要性？ 一炮送你回车库 JavaScript
    现在Javascript面向对象的方式来写页面很流行，什么纯javascript的mvc框架都出来了：ember 这是javascript层的mvc框架哦,不是j2ee的mvc框架   我想说的是，javascript本来就不是一门面向对象的语言，用它写出来的面向对象的程序，本身就有些别扭，很多人提到js的面向对象首先提的是：复用性。那么我请问你写的js里有多少是可以复用的，用fu
  • js array对象的迭代方法 换个号韩国红果果 array
    1.forEach 该方法接受一个函数作为参数， 对数组中的每个元素 使用该函数  return 语句失效 function square(num) { print(num, num * num); } var nums = [1,2,3,4,5,6,7,8,9,10]; nums.forEach(square); 2.every 该方法接受一个返回值为布尔类型
  • 对Hibernate缓存机制的理解 归来朝歌 session一级缓存对象持久化
    在hibernate中session一级缓存机制中，有这么一种情况： 问题描述：我需要new一个对象，对它的几个字段赋值，但是有一些属性并没有进行赋值，然后调用 session.save()方法，在提交事务后，会出现这样的情况： 1：在数据库中有默认属性的字段的值为空 2：既然是持久化对象，为什么在最后对象拿不到默认属性的值？ 通过调试后解决方案如下： 对于问题一，如你在数据库里设置了
  • WebService调用错误合集 darkranger webservice
     Java.Lang.NoClassDefFoundError: Org/Apache/Commons/Discovery/Tools/DiscoverSingleton 调用接口出错， 一个简单的WebService import org.apache.axis.client.Call;import org.apache.axis.client.Service; 首先必不可
  • JSP和Servlet的中文乱码处理 aijuans Java Web
    JSP和Servlet的中文乱码处理 前几天学习了JSP和Servlet中有关中文乱码的一些问题，写成了博客，今天进行更新一下。应该是可以解决日常的乱码问题了。现在作以下总结希望对需要的人有所帮助。我也是刚学，所以有不足之处希望谅解。 一、表单提交时出现乱码： 在进行表单提交的时候，经常提交一些中文，自然就避免不了出现中文乱码的情况，对于表单来说有两种提交方式：get和post提交方式。所以
  • 面试经典六问 atongyeye 工作面试
    题记：因为我不善沟通，所以在面试中经常碰壁，看了网上太多面试宝典，基本上不太靠谱。只好自己总结，并试着根据最近工作情况完成个人答案。以备不时之需。 以下是人事了解应聘者情况的最典型的六个问题： 1 简单自我介绍 关于这个问题，主要为了弄清两件事，一是了解应聘者的背景，二是应聘者将这些背景信息组织成合适语言的能力。 我的回答：(针对技术面试回答，如果是人事面试，可以就掌
  • contentResolver.query()参数详解 百合不是茶 androidquery()详解
    收藏csdn的博客,介绍的比较详细,新手值得一看 1.获取联系人姓名 一个简单的例子，这个函数获取设备上所有的联系人ID和联系人NAME。 [java]  view plain copy   public void fetchAllContacts() {      
  • ora-00054:resource busy and acquire with nowait specified解决方法 bijian1013 oracle数据库killnowait
            当某个数据库用户在数据库中插入、更新、删除一个表的数据，或者增加一个表的主键时或者表的索引时，常常会出现ora-00054:resource busy and acquire with nowait specified这样的错误。主要是因为有事务正在执行（或者事务已经被锁），所有导致执行不成功。 1.下面的语句
  • web 开发乱码 征客丶 springWeb
    以下前端都是 utf-8 字符集编码 一、后台接收 1.1、 get 请求乱码 get 请求中，请求参数在请求头中； 乱码解决方法： a、通过在web 服务器中配置编码格式：tomcat 中，在 Connector 中添加URIEncoding="UTF-8"； 1.2、post 请求乱码 post 请求中，请求参数分两部份， 1.2.1、url？参数，
  • 【Spark十六】： Spark SQL第二部分数据源和注册表的几种方式 bit1129 spark
    Spark SQL数据源和表的Schema case class apply schema parquet json JSON数据源 准备源数据 {"name":"Jack", "age": 12, "addr":{"city":"beijing&
  • JVM学习之:调优总结 -Xms -Xmx -Xmn -Xss BlueSkator -Xss-Xmn-Xms-Xmx
      堆大小设置JVM 中最大堆大小有三方面限制：相关操作系统的数据模型（32-bt还是64-bit）限制；系统的可用虚拟内存限制；系统的可用物理内存限制。32位系统下，一般限制在1.5G~2G；64为操作系统对内存无限制。我在Windows Server 2003 系统，3.5G物理内存，JDK5.0下测试，最大可设置为1478m。典型设置： java -Xmx355
  • jqGrid 各种参数 详解(转帖) BreakingBad jqGrid
      jqGrid 各种参数 详解 分类：  源代码分享  个人随笔请勿参考  解决开发问题 2012-05-09 20:29   84282人阅读   评论(22)   收藏   举报 jquery 服务器 parameters function ajax string  
  • 读《研磨设计模式》-代码笔记-代理模式-Proxy bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.lang.reflect.InvocationHandler; import java.lang.reflect.Method; import java.lang.reflect.Proxy; /* * 下面
  • 应用升级iOS8中遇到的一些问题 chenhbc ios8升级iOS8
    1、很奇怪的问题，登录界面，有一个判断，如果不存在某个值，则跳转到设置界面，ios8之前的系统都可以正常跳转，iOS8中代码已经执行到下一个界面了，但界面并没有跳转过去，而且这个值如果设置过的话，也是可以正常跳转过去的，这个问题纠结了两天多，之前的判断我是在 -(void)viewWillAppear:(BOOL)animated  中写的，最终的解决办法是把判断写在 -(void
  • 工作流与自组织的关系？ comsci 设计模式工作
      目前的工作流系统中的节点及其相互之间的连接是事先根据管理的实际需要而绘制好的，这种固定的模式在实际的运用中会受到很多限制，特别是节点之间的依存关系是固定的，节点的处理不考虑到流程整体的运行情况，细节和整体间的关系是脱节的，那么我们提出一个新的观点，一个流程是否可以通过节点的自组织运动来自动生成呢？这种流程有什么实际意义呢？   这里有篇论文，摘要是：“针对网格中的服务
  • Oracle11.2新特性之INSERT提示IGNORE_ROW_ON_DUPKEY_INDEX daizj oracle
    insert提示IGNORE_ROW_ON_DUPKEY_INDEX 转自：http://space.itpub.net/18922393/viewspace-752123 在 insert into tablea ...select * from tableb中，如果存在唯一约束，会导致整个insert操作失败。使用IGNORE_ROW_ON_DUPKEY_INDEX提示，会忽略唯一
  • 二叉树:堆 dieslrae 二叉树
        这里说的堆其实是一个完全二叉树,每个节点都不小于自己的子节点,不要跟jvm的堆搞混了.由于是完全二叉树,可以用数组来构建.用数组构建树的规则很简单:     一个节点的父节点下标为: (当前下标 - 1)/2     一个节点的左节点下标为: 当前下标 * 2 + 1   &
  • C语言学习八结构体 dcj3sjt126com c
    为什么需要结构体，看代码 # include <stdio.h> struct Student //定义一个学生类型，里面有age, score, sex, 然后可以定义这个类型的变量 { int age; float score; char sex; } int main(void) { struct Student st = {80, 66.6,
  • centos安装golang dcj3sjt126com centos
    #在国内镜像下载二进制包 wget -c  http://www.golangtc.com/static/go/go1.4.1.linux-amd64.tar.gz tar -C /usr/local -xzf go1.4.1.linux-amd64.tar.gz   #把golang的bin目录加入全局环境变量 cat >>/etc/profile<
  • 10.性能优化-监控-MySQL慢查询 frank1234 性能优化MySQL慢查询
    1.记录慢查询配置 show variables where variable_name like 'slow%' ; --查看默认日志路径 查询结果：--不用的机器可能不同 slow_query_log_file=/var/lib/mysql/centos-slow.log 修改mysqld配置文件：/usr /my.cnf[一般在/etc/my.cnf，本机在/user/my.cn
  • Java父类取得子类类名 happyqing javathis父类子类类名
      在继承关系中，不管父类还是子类，这些类里面的this都代表了最终new出来的那个类的实例对象，所以在父类中你可以用this获取到子类的信息！   package com.urthinker.module.test; import org.junit.Test; abstract class BaseDao<T> { public void
  • Spring3.2新注解@ControllerAdvice jinnianshilongnian @Controller
    @ControllerAdvice，是spring3.2提供的新注解，从名字上可以看出大体意思是控制器增强。让我们先看看@ControllerAdvice的实现：   @Target(ElementType.TYPE) @Retention(RetentionPolicy.RUNTIME) @Documented @Component public @interface Co
  • Java spring mvc多数据源配置 liuxihope spring
    转自：http://www.itpub.net/thread-1906608-1-1.html 1、首先配置两个数据库 <bean id="dataSourceA" class="org.apache.commons.dbcp.BasicDataSource" destroy-method="close&quo
  • 第12章 Ajax（下） onestopweb Ajax
    index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
  • BW / Universe Mappings blueoxygen BO
      BW Element OLAP Universe Element Cube  Dimension Class Charateristic A class with dimension and detail objects (Detail objects for key and desription) Hi
  • Java开发熟手该当心的11个错误 tomcat_oracle java多线程工作单元测试
    #1、不在属性文件或XML文件中外化配置属性。比如，没有把批处理使用的线程数设置成可在属性文件中配置。你的批处理程序无论在DEV环境中，还是UAT（用户验收 测试）环境中，都可以顺畅无阻地运行，但是一旦部署在PROD 上，把它作为多线程程序处理更大的数据集时，就会抛出IOException，原因可能是JDBC驱动版本不同，也可能是#2中讨论的问题。如果线程数目 可以在属性文件中配置，那么使它成为
  • 推行国产操作系统的优劣 yananay windowslinux国产操作系统
    最近刮起了一股风，就是去“国外货”。从应用程序开始，到基础的系统，数据库，现在已经刮到操作系统了。原因就是“棱镜计划”，使我们终于认识到了国外货的危害，开始重视起了信息安全。操作系统是计算机的灵魂。既然是灵魂，为了信息安全，那我们就自然要使用和推行国货。可是，一味地推行，是否就一定正确呢？ 先说说信息安全。其实从很早以来大家就在讨论信息安全。很多年以前，就据传某世界级的网络设备制造商生产的交
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他