有3个DIV和3个按钮，首先3个DIV全部显示，点击按钮，对应DIV显示到指定位置
document.getElementsByClassName,根据class样式获取元素
dom.classList.remove 删除指定样式
dom.classList.add 添加指定样式
div默认隐藏，通过添加css样式使其display：block，
点击其他按钮：通过第一条找到显示的div，删除对应的样式，然后根据点击的按钮逻辑为指定的div添加class样式
如下参考：
1.页面复制有一个id为c2的div，下面有一个子div，下面有一个按钮，事件是用来点击100个adddiv。
2.在event函数中，定义一个内容为degreediv字符的字符串变量。
3.然后使用jquery的append将已知的div字符串添加到c2div，如下所示。
4.运行页面，现在只看到一个div，如下图所示。
5.单击下面的按钮来触发添加div的逻辑，如下所示。
参考代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div方块移动</title>
<style>
.div1{
width: 200px;
height: 200px;
background-color: gray;
box-shadow: 5px 5px 0 rgba(0,0,0,0.2);
margin-left: 0px;
-webkit-transition: all 3s;
-moz-transition: all 3s;
-ms-transition: all 3s;
-o-transition: all 3s;
transition: all 3s;
}
</style>
</head>
<body>
<div class="div1">
点击我
</div>
<script>
const div = document.getElementsByTagName("div")[0];
div.addEventListener("click",()=>{
div.style.marginLeft = "200px";
});
</script>
</body>
</html>
效果：
点击之后
代码我放到了Github服务器上，下面是链接：
方块移动
写了个小案例给你，css样式按自己需求写，有疑惑再问我（测试前请加载jquery文件）
html如下：
<div class="title">
<a href="#" id="t1_1">按钮1</a>
<a href="#" id="t1_2">按钮2</a>
<a href="#" id="t1_3">按钮3</a>
</div>
<div class="main">
<div id="m1_1">box1</div>
<div id="m1_2">box2</div>
<div id="m1_3">box3</div>
</div>
jquery如下：
$(".title a" ).click(function(){
var id = $(this).attr('id');
var no = id.slice(1);
$(".main").find('div').hide();
$('#m'+no).show();
return false;
});
你用div把布局做好之后.然后给div添加点击事件..百度就有,打开或者隐藏.
这种用3个div怎么写啊?
<div class="zong"> <div class="div1">Div1<\/div> <div class="div2">Div2<\/div> <div class="div3">Div3<\/div> <\/div> 2、3个div并列 <div class="div1">Div1<\/div><br\/> <div class="div2">Div2<\/div><br\/> <div class="div3">Div3<\/div><br\/> ...
如何让三个DIV块,两边宽度固定, 中间宽度自适应?
<!DOCTYPE html> <html> <head> <meta charset="utf-8" \/> <title>宽度自适应布局<\/title> <style> body,div{ margin:0; padding:0;} div{ height:200px; color:#F00;} .left{ float:left; width:100px; background:#00f; _margin-right:-3px;} .right{ float:right; width:100...
三个div快 第一个左浮动 第二个不浮动 第三个右浮动 为什么右浮动上不去...
因为第三个div块是写在第二个div块下面的，而且第二个div块的位置正常，没有浮动，它会一直占住它本来的位置。所以第三个div块不管怎么浮动都会被第二个div块挡下去。就好像假如你的第一个向左浮动的div是写在第二个div下面，它也是不可能占到第二个蓝色的位置上去的。<div style=" " ><\/div...
如何用三个div将三个页面整合到一个页面
上CSS啊，第一个div 用float:left,第二个用 float:right，最后一个用 clear:both 空间什么的扔div里面就好了
3个div如何排列在一行,不换行
200px，auto这样的固定长度。。。 问题补充：antiwise 写道你要动态调整3个div的宽度 用这个 <div style="width:100%;" id="outer"> <div class="left"><\/div> <div class="center"><\/div> <div class="right"><\/div><\/div><script type="text\/javascript"> (function _w(){ var ...
我有3个DIV,Class相同,怎么用Jquery获取到第三个DIV?
1、首先，打开html编辑器，新建html文件，例如：index.html，并引入jquery，编写问题基础代码。2、在index.html中的<script>标签，输入jquery代码：$('body').append($('.abc').eq(2).text());。3、浏览器运行index.html页面，此时成功用jquery取得了相同class的div的第3个元素并打印了其内容。
3个div并排显示,其位置无论窗口大小保持不变!
你好：在css文件中写每个div块时定义： float：left。你可以把整个页面通俗的理解为一个容器，当倒着往容器里灌水时相当于依次向左摆放3个div块。具体如下：HTML:<div id=exampleA ><\/div> <div id=exampleB ><\/div> <div id=exampleC ><\/div> css：exampleA {float：left;} exampleB {...
请教“用3个DIV显示在同一行时,最右边的DIV部分文字显示在下一行(3个...
如果定了width那么border会占用外面的像素 有3种解决办法：1.内部容器本身宽度减1,2个像素 2.gqxx_main扩大4个像素（1＋1＋2）3.gqxx_main不变，增加overflow:hidden。然后在main和内部容器之间加1个width超过1004px的临时容器。
网页设计:3个div排列,左右两个自动调整宽度,中间固定。
这个用JS去控制是最好的，因为不同屏幕有不同的分辨率，所以要先用JS去获取窗口的大小，中间固定，那两边是不是除去中间后的50%呢？如果是就用获取的窗口大小减去中间的再除以2就是两边的宽度了，我只是给你个思路，如果不明白再追问！
手机页面怎么让3个div大小相同边距相同,并排一行
手机页面一般都用百分比来做布局，所以如果是3个div排列，有个简单的方法，你参考一下：html结构如下：<div class="box">1<\/div> <div class="box">2<\/div> <div class="box">3<\/div> css样式如下：.box{width: 30%;height: 100px;float: left;margin: 0 0 0 2.5%;background: #...
汉厕口服： 写了个小案例给你,css样式按自己需求写,有疑惑再问我(测试前请加载jquery文件) html如下:<div class=＂title＂> <a href=＂#＂ id=＂t1_1＂>按钮1</a> <a href=＂#＂ id=＂t1_2＂>按钮2</a> <a href=＂#＂ id=＂t1_3＂>按钮3</a></div><...
庆安县15232346031： dw中有三个div 和三个单选按钮A、B、C 每按一个按钮就有且只有一个div隐藏怎么做 - ？
汉厕口服： <div id=＂div1＂>DIV1</div><div id=＂div2＂>DIV2</div><div id=＂div3＂>DIV3</div><input type=＂button＂ onclick=＂ShowDiv(1);＂ value=＂ShowDiv1＂ /><input type=＂button＂ onclick=＂ShowDiv(2);＂ value=＂ShowDiv2＂ /><input type=...
庆安县15232346031： js:如何将三个不同按钮出现同一个dialog却显示不同的按钮对应的三张图片出来? - ？
汉厕口服： function showimg(var arg){var src=＂＂;if(arg===1){src=＂1.jpg＂//...
庆安县15232346031： 如何实现3个div并排!？
汉厕口服： 三个div 外面再写个div标签, 然后 float设置为left, 包在里面的三个div都设置 left 注意三个div加起来宽度不要超过,外面的div 就可以了.
庆安县15232346031： DW中页面中有一个大DIV,大DIV里有三个小DIV,如何让三个小DIV在大DIV里左、中、右排开,并随网页缩放缩放？
汉厕口服： 给你2个解决方案: 1、使用table布局,好处就是td不会换行,不容易出错,3个td高度一直是一样的,所以可以再在里面套div; 举例: <div style=＂height:130px; border:1px solid red; padding-top:30px;＂> <table border=＂0＂ cellpadding...
庆安县15232346031： 怎么用javascript来控制三个DIV的隐藏个显示,我的意思是这样的,现在又三个按钮,控制三个DIV层.点击其中一个其他两个隐藏,这个显示的DIV层必须要在上一个DIV层上,完全覆盖,坐标相同.？
汉厕口服： <html> <head> <script> function showDiv(name){ if(＂divA＂==name){ document.getElementById(name).style.display=＂block＂; document.getElementById(＂divB＂).style.display=＂none＂; document.getElementById(＂divC＂).style.display=＂...
庆安县15232346031： 一个大的div套三个小div,如何让三个小div平均分配???? - ？
汉厕口服： 1、首先需要打开自己电脑上的DW软件,然后新建一个html页面,并保存在桌面上. 2、然后需要在该html页面的body部分敲入部分代码,基本上就是一个父级DIV下面有三个子级DIV. 3、然后在三个子div中输入文字,在浏览器中测试,查看效果,可以看到默认情况下三个div是竖排显示的. 4、接下来要这四个div赋予class属性,使之具有不同的样. 5、然后为三个中的前两个设置float:left属性,最后一个设置float:right属性,或者是float:left属性,都可以. 6、之后再到浏览器中查看,就可以发现三个div并排显示了.
庆安县15232346031： 请问下面这个用javascript编写怎么编啊,能给个思路吗? - ？
汉厕口服： 这个还是比较简单的,思路如下:首先要使用HTML建立起一个导航条,也就是tab卡的按钮,让它们float显示成一行.然后对应按钮数量的主体,这些主体只有一开始默认的是显示的,其它的都display:none隐藏掉;然后使用JS对每个按钮进行事件附加.事件里处理的事情就是让除了按钮对应的主体显示以外,其它的都隐藏掉.下面有代码,基本上有对应的注释,你看看理解下:html> 按钮累加 Tab1 Tab2 Tab3 Tab4 这里是第一个 这里是第一个 这里是第一个 这里是第二个 这里是第二个 这里是第二个 这里是第三个 这里是第三个 这里是第三个 这里是第四个 这里是第四个 这里是第四个
庆安县15232346031： 求一CSS.实现效果:动态宽度DIV内有3个DIV[div1,div2,div3],已确定DIV1,DIV3的宽度. 设置其余为DIV2宽度.？
汉厕口服： 只需要给div2属性{width:100%; margin-right:-200px;}-200=div1宽度+div2宽度希望能帮助到你下面是演示代码<!DOCTYPE html PUBLIC ＂-//W3C//DTD XHTML 1.0 Transitional//EN＂ ＂http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd＂&...
庆安县15232346031： 我有3个DIV,Class相同,怎么用Jquery获取到第三个DIV? - ？
汉厕口服： 1、首先,打开html编辑器,新建html文件,例如:index.html,并引入jquery,编写问题基础代码.2、在index.html中的<script>标签,输入jquery代码:$('body').append($('.abc').eq(2).text());.3、浏览器运行index.html页面,此时成功用jquery取得了相同class的div的第3个元素并打印了其内容.
