为了账号安全,请及时绑定邮箱和手机立即绑定

用DIV怎么实现框架的效果,就是点左边的导航栏,在右边显示内容,不用iframe的话,该怎么实现呢

添加回答

11回答
已采纳
编辑回答
一种方式是使用锚点,这个比较简单。 第二种方式就是,点击某个导航,然后相应内容块显示,其它内容块隐藏。至于具体实现的话可以使用for循环,该隐藏的块隐藏该显示的块显示,也可以不用循环,每次点击导航时先关闭上一次打开的块,然后再打开本次点击对应的块。 第三种方式和锚点差不多,给一个父容器,父容器中放入很多块,父容器设置溢出隐藏,点击的时候通过改变子容器定位或者父容器的scrollTop来实现显示对应的块。 当然可能还有其他办法,到底用哪种看具体需求了
反对 6个回复 2018-06-14
你还没有登录,请先登录注册慕课网帐号
回复
编辑回答
    <style>         *{             margin: 0;             padding: 0;             text-decoration: none;             list-style: none;         }         ul{             float: left;         }         ul li{             border: 1px solid #cc3300;             padding: 8px;         }         div{             position: absolute;             top:0px;             left:65px;             width:300px;             height:200px;             background: #61789e;             text-align: center;             font-size: 80px;             line-height: 200px;         }     </style> <ul>     <li>菜单1</li>     <li>菜单2</li>     <li>菜单3</li>     <li>菜单4</li>     <li>菜单5</li> </ul> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript">     $("ul li").click(function(){         var q=$(this).index();         $('div').eq(q).show().siblings('div').hide();     }) </script>这个就轻松搞定
1 反对 0个回复 2018-06-14
你还没有登录,请先登录注册慕课网帐号
回复
编辑回答
不用iframe,还有几种方法:
  • 傻瓜式;  右边div从上往下写,第一个show();其他的都hide();点击左边的控制右边的hide,show。同时在url里面加个’?111‘等类似的,判断,防止用户刷新后一直是第一个div显示。
  • 高级点;  模块化开发,每个都是一个模块。node,vue都可以做到。
  • 陈独秀的方法;  前端使用php的include方法引入。
  • 2 反对 11个回复 2018-06-14
    你还没有登录,请先登录注册慕课网帐号
    回复
    编辑回答

    1234556?
    反对 3个回复 2018-06-15
    你还没有登录,请先登录注册慕课网帐号
    回复
    编辑回答
    用vue是最好的,简单的不行,而且点击过的再次点击不会刷新页面
    反对 0个回复 2018-06-14
    你还没有登录,请先登录注册慕课网帐号
    回复
    编辑回答
    jquery的html()方法
    反对 0个回复 2018-06-14
    你还没有登录,请先登录注册慕课网帐号
    回复
    编辑回答
    123
    反对 0个回复 2018-06-14
    你还没有登录,请先登录注册慕课网帐号
    回复
    编辑回答
    111
    反对 0个回复 2018-06-14
    你还没有登录,请先登录注册慕课网帐号
    回复
    编辑回答
    123
    反对 0个回复 2018-06-14
    你还没有登录,请先登录注册慕课网帐号
    回复
    编辑回答
    你完全把html代码封装在文里,前端html代码用文件调用即可,
    反对 2个回复 2018-06-14
    你还没有登录,请先登录注册慕课网帐号
    回复
    编辑回答
    用vue或者react组件化,很容易实现的。要么就用原生的,display的none和block
    反对 0个回复 2018-06-14
    你还没有登录,请先登录注册慕课网帐号
    回复
    举报
    0/150
    提交
    取消
    意见反馈 常见问题 APP下载
    官方微信
    hv128