iframe切换

最新推荐文章于 2024-04-15 13:47:16 发布

南风过境~

最新推荐文章于 2024-04-15 13:47:16 发布

阅读量203

点赞数

分类专栏：没事闲玩儿

本文链接：https://blog.csdn.net/qq_43688916/article/details/106690153

版权

没事闲玩儿专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<style>
  *{
    margin: 0;
    padding: 0;
  }
  html,body{
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
.left{
  width: 200px;
  height: 100%;
}
.right{
  flex:1;
  background-color: #ccc;
}
li{
  height: 50px;
  width: 100%;
  text-align: center;
  line-height: 50px;
  cursor:pointer;
  list-style: none;
}
li:hover{
  background-color: pink;
}

</style>
<body>
  <div style="width: 100%;height: 100%;display: flex;">
    <div class="left">
      <ul>
        <li id="p0">iview</li>
        <li id="p1">百度一下</li>
        <li id="p2">优贝迪</li>
        <li id="p3">谷歌</li>
      </ul>
    </div>
    <div class="right">
      <iframe style="border:1px solid #ccc" scrolling="yes" frameborder="1" width="100%" height="100%" src="http://v1.iviewui.com/" id="iframe"></iframe>
    </div>
  </div>
</body>
<script>
  var lis=document.getElementsByTagName('li')
  var iframe=document.getElementById('iframe')
  for(let i = 0;i<lis.length; i++){
    lis[i].onclick=function(){
      switch(lis[i].id){
        case 'p0' :
        iframe.src="http://v1.iviewui.com";
        break;
        case 'p1' :
        iframe.src="https://www.baidu.com/";
        break;
        case 'p2' :
        iframe.src="http://test.jianyunkeji.net/ybd/";
        break;
        default:
        alert('哈哈哈，没有页面');
          
      }
    }
  }
</script>

点击左边右边可跳转到不同的页面
在这里插入图片描述

南风过境~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iframe切换

<style> *{ margin: 0; padding: 0; } html,body{ height: 100%; margin: 0; padding: 0; overflow: hidden; }.left{ width: 200px; height: 100%;}.right{ flex:1; background-color: #ccc;}li{ height: 50px; width
复制链接

扫一扫