98mei 最近的时间轴更新
98mei

98mei

V2EX 第 155031 号会员,加入于 2016-01-11 21:29:35 +08:00
98mei 最近回复了
##2016-1-12 上午

## 1.搜索:
- 用 google 搜索关键词: **jquery 显示 隐藏 div**
- 找到:[jQuery 效果 - 隐藏和显示]( http://www.w3school.com.cn/jquery/jquery_hide_show.asp)
- 最下面的: jQuery toggle() 实现的就是我想要的效果。


## 2.成果:
正常:
![]( http://i4.tietuku.com/14aa7e45b1d58742.jpg)

点击:
![]( http://i4.tietuku.com/0e31edd2d34e34d3.jpg)


## 3.贴代码:下面是完整的代码都在一个 html 文件里
```
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Theme_box</title>



<link href="" rel="stylesheet">

<style type="text/css">

.Themes{
width: 960px;
background-color: #999999;
height: 400px;

margin: 100px auto;
}

.Theme_box{
width: 158px;
height: 100px;
background-color: #ffffff;
float: left;
margin: 1px;

line-height: 100px;
text-align: center;
}



button{
width: 158px;
height: 100px;
background-color: #ffffff;
float: left;
margin: 1px;

line-height: 100px;
text-align: center;
}


</style>


<script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script> <!-- 引入 jQuery 文件 -->

<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){ //按扭
$("p").toggle(); //内容
});
});
</script>



</head>


<body>



<div class="Themes">

<div class="Theme_box">你好 box</div>
<div class="Theme_box">你好 box</div>
<div class="Theme_box">你好 box</div>

<button type="button">你好 box 按扭</button>
<!-- <button>是标记一个按扭 标记按扭 -->
<p>这是一个段落。</p> <!-- 内容 -->
<p>这是另一个段落。</p>

<div class="Theme_box">你好 box</div>
<div class="Theme_box">你好 box</div>

<div class="Theme_box">你好 box</div>
<div class="Theme_box">你好 box</div>
<div class="Theme_box">你好 box</div>
<div class="Theme_box">你好 box</div>
<div class="Theme_box">你好 box</div>
<div class="Theme_box">你好 box</div>



</div>

</body>

</html>
```


# 4.问题:如上图,显示的内容是在右边,不是在一整行的下边。并且宽度要 960px 。如 google 图片一样的效果。
关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   997 人在线   最高记录 6679   ·     Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 · 13ms · UTC 20:36 · PVG 04:36 · LAX 12:36 · JFK 15:36
Developed with CodeLauncher
♥ Do have faith in what you're doing.