实现同一网页DIV自由切换
实现同一网页DIV自由切换
徐小明d 发表于8个月前
实现同一网页DIV自由切换
  • 发表于 8个月前
  • 阅读 3
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

在同一个页面实现不同div 的切换更替

设想,我们定义两个大的div各分布在左右两边,左边的放控制标签,右边的div则随左边的事件而改变。意思就跟我们看的手册一样,左边是标题,右边是内容。好的,下面我来写一个简单的切换代码解析吧。

HTML内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>博客首页</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="/static/js/home.js"></script>
        <link href="/static/css/all.css" rel="stylesheet" type="text/css"/>
    </head>

  <body>

      <div class="body-home">

              <div id="body-left">//左侧div

                   <ul  type="none">
                            <li onclick="changeBody(1)">博客1</li>
                            <li onclick="changeBody(2)">博客2</li>
                   </ul> 

              </div>

             

             <div id="body-right">//右侧div

                    <div>
                        <h2 class="mod_most">博客专栏</h2>
                    </div>

                    <div id="contentmenu1">
                        博主太懒了,还没有写文章~
                    </div>
                    <div id="contentmenu2" style="display: none" >//默认不显现这个div
                        这是一个博客文标题
                    </div>

            </div>

      </div>

  </body>
</html>

 

all.css 样式

*{margin: 0;}

.body-home{
    margin: 0 auto;
    border: 0;
    background-color: #F8F8F8;
    height: 700px;
    width: 960px;
}

#body-left{
    margin: 0;
    padding-bottom: 20px;
    border: 0;
    float: left;
    width: 220px;
    height: auto;
    background-color:#F8F8F8;
}

#body-right{
    margin:0,0,0,10px;
    padding-bottom: 20px;
    border: 0;
    float: right;
    width: 730px;
    height: auto;
    background-color:#F8F8F8;
}

#contentmenu1{
    padding-left: 20px;
    height: 130px;
    width: 710px;
}

#contentmenu2{
    padding-left: 20px;
    height: 130px;
    width: 710px;
}

 

 

home.js 文件

function changeBody(index)
{
    switch (index) {
        case 1:
        {
            document.getElementById('contentmenu1').style.display = "";
            document.getElementById('contentmenu2').style.display = "none";
            break;
        }
        case 2:
        {   
            document.getElementById('contentmenu1').style.display = "none";
            document.getElementById('contentmenu2').style.display = "block";
            break;
        }
    }
}

 

共有 人打赏支持
粉丝 0
博文 27
码字总数 9746
×
徐小明d
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: