导航区不变内容区变

最新推荐文章于 2022-09-02 11:50:09 发布

elena_0117

最新推荐文章于 2022-09-02 11:50:09 发布

阅读量769

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签：导航内容区

本文链接：https://blog.youkuaiyun.com/elena20170326/article/details/72954133

js 专栏收录该内容

4 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      div{
          width:300px;
          height:300px;
      }
      #t1{
          background: red;
          float: left;

      }
      #t2{
          background: green;
          float:left;
      }
      #t3{
          float:left;
         background: blue;

      }
      #comm{
          width:300px;
          height:30px;
      }
     li{
         float: left;
         list-style-type: none;
         margin-right:20px;

     }

    </style>
</head>
<body>
    <div id="comm">
      <ul>
          <li><a href="#t1" onclick="show('t1');">主页</a></li>
          <li><a href="#t2" onclick="show('t2');">生活</a></li>
          <li><a href="#t3" onclick="show('t3');">技术</a></li>
      </ul>
    </div>
    <div id="t1"></div>
    <div id="t2" style="display: none"></div>
    <div id="t3" style="display: none"></div>
</body>
<script>
var t1=document.getElementById('t1');
var t2=document.getElementById('t2');
var t3=document.getElementById('t3');
   function show(test){
       
            if(test=='t1'){
                   t1.style.display="block";
                   t2.style.display="none";
                t3.style.display="none";
                
        }else if(test=='t2'){
                   t1.style.display="none";
                   t2.style.display="block";
                t3.style.display="none";

          }else if(test=='t3'){
                   t1.style.display="none";
                   t2.style.display="none";
                t3.style.display="block";
          }
   }





</script>
</html>