首页 新闻 赞助 找找看

div显示与隐藏

0
悬赏园豆:10 [待解决问题]
标题1  
内容1
标题2  
内容2

点击标题1,就隐藏内容1这个div,再点击标题1,又把内容1显示出来

点击标题2,就隐藏内容2这个div,再点击标题2,又把内容2显示出来

这里可能不只有2个,如果有N个该如何写CSS样式

<div style="background: red; border: 1px; height: 20px;">标题1  </div>
<div style="border-color: Black; background: green; height: 80px;">内容1</div>
<div style="background: red; border: 1px; height: 20px;">标题2  </div>
<div style="border-color: Black; background: green; height: 80px;">内容2</div>
<div>
<h3>点击标题1,就隐藏内容1这个div,再点击标题1,又把内容1显示出来</h3>
<h3>点击标题2,就隐藏内容2这个div,再点击标题2,又把内容2显示出来</h3>
<h3>这里可能不只有2个,如果有N个该如何写CSS样式</h3>
</div>

 

 

 

梁均的主页 梁均 | 初学一级 | 园豆:192
提问于:2014-05-28 15:31
< >
分享
所有回答(3)
0

不要这样写样式。遇到这种情况使用Js比较好处理。定义一个点击方法。方法体的操作就是获取当前div的dispaly属性。并做判断,如果是显示就隐藏,隐藏就修改为显示。这样就好处理了。如果不会的话,那就留言,这个Js应该很简单。就没贴代码

呓语鑫 | 园豆:313 (菜鸟二级) | 2014-05-28 16:44
0

我一般用js来控制,你可以参考一下

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="Scripts/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".div_title").click(function () {
                var id = "#div" + this.id;
                $(id).toggle();
            });
        });
    </script>
</head>
<body>
    <div class="div_title" style="cursor:pointer" id="1">标题1</div>
    <div id="div1" style="display: none; background-color: green">内容1内容1内容1内容1内容1内容1</div>
    <div class="div_title" style="cursor:pointer" id="2">标题2</div>
    <div id="div2" style="display: none; background-color: green">内容2内容2内容2内容2内容2内容2</div>
    <div class="div_title" style="cursor:pointer" id="3">标题3</div>
    <div id="div3" style="display: none; background-color: green">内容3内容3内容3内容3内容3内容3</div>
    <div class="div_title" style="cursor:pointer" id="4">标题4</div>
    <div id="div4" style="display:none; background-color:green">内容4内容4内容4内容4内容4内容4</div>
</body>
</html>
取消操作 | 园豆:186 (初学一级) | 2014-05-28 17:43
0

主要是通过display属性来控制。当其值为block,则显示为块状;当其值为none时,则隐藏起来。

崴脚步花盐人 | 园豆:269 (菜鸟二级) | 2014-05-29 23:35
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册