点击导航栏切换div层内容

img


我想点击上面导航栏里面那四个div层 实现下面div层内容的切换

点击哪个，这个div设置成display:block，其他的display:none;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 标签式的导航菜单</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<p>标签式的导航菜单</p>
<ul id="myTab" class="nav nav-tabs">
        <li role="presentation" class="active"><a href="#home" data-toggle="tab">首页</a></li>
        <li role="presentation"><a href="#profile">介绍</a></li>
        <li role="presentation"><a href="#dropdown1">消息</a></li>
    </ul>

    <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade in active" id="home"><p>首页内容..</p> </div>
        <div class="tab-pane fade" id="profile">  <p>介绍内容...</p></div>
        <div class="tab-pane fade" id="dropdown1">
            <p>.消息内容..</p>
        </div>
    </div>
    <script type="text/javascript">
      $('#myTab a').click(function (e) {
            e.preventDefault();
            $(this).tab('show');
        });
</script>


</body>
</html>

使用js通过点击事件触发改变div标签中的样式，隐藏和显示 display:block，display:none;
你也可以去看看前端的框架，有的已经封装好了，你只需要拿来使用就行了，比如elementUI
https://element.eleme.io/#/zh-CN/component/menu
https://element.eleme.io/#/zh-CN/component/tabs

  1. 用iframe标签内嵌其他页面。再写几个页面，点击导航栏的时候修改iframe的src属性，分别指向新建的页面
  2. 在内容区写再写四个div，然后设置这四个div为绝对定位(脱离文档流，不占位置，这四个div就可以重叠放在一起了)和visibility:hide
    然后点击导航栏时设置对应div的样式 visibility:initial
您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632