devbox
Gausst松鼠会
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

点击垂直导航栏中的某项实现页面跳转CSS+JavaScript_怎么点击顶部导航栏然后跳转页面

作者：Gausst松鼠会 | 2024-03-16 05:11:48

赞

踩

怎么点击顶部导航栏然后跳转页面

目录

1.主要页面

 2.相关部分的介绍

2.1 首先整体的构思

2.2 相关代码的解释

源代码如下：

希望能够帮到你哦~

1.主要页面

 2.相关部分的介绍

2.1 首先整体的构思

这里用到的是CSS盒子的思想 首先我们需要用一个大盒子作为主体页面 接着放三个小盒子 来完成页面的布局

2.2 相关代码的解释

  1. </head>
  2. <body>
  3. <div class="box">    
  4.     <div class="header">
  5.         <ul>
  6.             <li><a href="#" onclick="showContent('main')">首页</a></li>
  7.             <li><a href="#" onclick="showContent('user')">用户管理</a></li>
  8.             <li><a href="#" onclick="showContent('artical')">文章管理</a></li>
  9.         </ul>
  10.     </div>
  11.     <div class="article">
  12.       <h1 class="title">欢迎来到后台管理系统</h1>
  13.     </div>
  14.     <div class="content" id="content">
  15.     <p class="title2">工作区域</p>
  16.     </div>

第一个盒子是header 也就是导航栏部分 这里有三个用链接a标签做成的按钮 用以实现页面的跳转 第二个盒子是artical 也就是最上面的部分 第三个盒子是content，也就是主要内容的呈现 当用户点击时 实现页面的跳转

 然后我们再来看看css的相关代码

  1.  <style type="text/css">
  2.         /* 用以消除其他标签自带的margin和padding 防止盒子被撑大 */
  3.         *{
  4.             margin: 0;
  5.             padding: 0;
  6.         }
  7.         /* 主体盒子的相关设定
  8.             1.margin 设置成居中的样式 0表示上下无间距 左右居中
  9.             2.box-sizing 保证盒子的原有尺寸
  10.         */
  11.         .box{
  12.             background-color: rgb(243,246,248);
  13.             margin: 0 auto;
  14.             width: 1080px;
  15.             height: 1080px;
  16.             box-sizing: border-box;
  17.         }
  18.         /* 将ul标签自带的序号点消除 */
  19.         ul{
  20.             list-style: none;
  21.         }
  22.         /* 将文字居中 */
  23.         .header li{
  24.             padding: 15px;
  25.             text-align: center;
  26.         }
  27.         /* 消除下划线 */
  28.         a{
  29.             text-decoration: none;
  30.             color:rgb(98,95,92)
  31.         }
  32.         /* 利用浮动的思想 将该盒子左浮动 位置固定在左边*/
  33.         .header{
  34.             float: left;
  35.             background-color: rgb(243,246,248);
  36.             width: 160px;
  37.             height: 1080px;
  38.             position: fixed;
  39.         }
  40.         .article{
  41.             float: right;
  42.             width: 910px;
  43.             height: 71px;
  44.             background-color: rgb(255,255,255);
  45.             margin-left:8px ;
  46.             border-left:8px solid rgb(0,116,114) ;
  47.             box-sizing: border-box;
  48.  
  49.         }
  50.         .title{
  51.             line-height: 71px;
  52.             margin-left: 8px;
  53.         }
  54.         /* 当光标停留在标签a上时 文字颜色变成红色 */
  55.         a:hover{
  56.             color: red;
  57.         }
  58.         .content{
  59.             float: right;
  60.             width: 910px;
  61.             height: 1001px;
  62.             background-color: rgb(255,255,255);
  63.             margin-top: 8px;
  64.         }
  65.         .title2{
  66.             text-align: center;
  67.             margin: 8px;
  68.         }
  69.         .title3{
  70.             margin: 8px;
  71.         }
  72.     </style>

3.源代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style type="text/css">
  9.         /* 用以消除其他标签自带的margin和padding 防止盒子被撑大 */
  10.         *{
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  14.         /* 主体盒子的相关设定
  15.             1.margin 设置成居中的样式 0表示上下无间距 左右居中
  16.             2.box-sizing 保证盒子的原有尺寸
  17.         */
  18.         .box{
  19.             background-color: rgb(243,246,248);
  20.             margin: 0 auto;
  21.             width: 1080px;
  22.             height: 1080px;
  23.             box-sizing: border-box;
  24.         }
  25.         /* 将ul标签自带的序号点消除 */
  26.         ul{
  27.             list-style: none;
  28.         }
  29.         /* 将文字居中 */
  30.         .header li{
  31.             padding: 15px;
  32.             text-align: center;
  33.         }
  34.         /* 消除下划线 */
  35.         a{
  36.             text-decoration: none;
  37.             color:rgb(98,95,92)
  38.         }
  39.         /* 利用浮动的思想 将该盒子左浮动 位置固定在左边*/
  40.         .header{
  41.             float: left;
  42.             background-color: rgb(243,246,248);
  43.             width: 160px;
  44.             height: 1080px;
  45.             position: fixed;
  46.         }
  47.         .article{
  48.             float: right;
  49.             width: 910px;
  50.             height: 71px;
  51.             background-color: rgb(255,255,255);
  52.             margin-left:8px ;
  53.             border-left:8px solid rgb(0,116,114) ;
  54.             box-sizing: border-box;
  55.  
  56.         }
  57.         .title{
  58.             line-height: 71px;
  59.             margin-left: 8px;
  60.         }
  61.         /* 当光标停留在标签a上时 文字颜色变成红色 */
  62.         a:hover{
  63.             color: red;
  64.         }
  65.         .content{
  66.             float: right;
  67.             width: 910px;
  68.             height: 1001px;
  69.             background-color: rgb(255,255,255);
  70.             margin-top: 8px;
  71.         }
  72.         .title2{
  73.             text-align: center;
  74.             margin: 8px;
  75.         }
  76.         .title3{
  77.             margin: 8px;
  78.         }
  79.     </style>
  80. </head>
  81. <body>
  82. <div class="box">    
  83.     <div class="header">
  84.         <ul>
  85.             <!-- onclick 绑定相应的事件 -->
  86.             <li><a href="#" onclick="showContent('main')">首页</a></li>
  87.             <li><a href="#" onclick="showContent('user')">用户管理</a></li>
  88.             <li><a href="#" onclick="showContent('artical')">文章管理</a></li>
  89.         </ul>
  90.     </div>
  91.     <div class="article">
  92.       <h1 class="title">欢迎来到后台管理系统</h1>
  93.     </div>
  94.     <div class="content" id="content">
  95.     <p class="title2">工作区域</p>
  96.     </div>
  97.     <!-- 利用脚本语言实现页面的跳转 -->
  98.     <script>
  99.         function showContent(id) {
  100.           var content = document.getElementById('content');
  101.           if (id === 'main') {
  102.             content.innerHTML = '<h1 class="title3">Welcome to my website!</h1><p class="title3">This is the home page.</p>';
  103.           } else if (id === 'user') {
  104.             content.innerHTML = '<h1 class="title3">About Us</h1><p class="title3">Learn more about our company.</p>';
  105.           } else if (id === 'artical') {
  106.             content.innerHTML = '<h1 class="title3">Our Services</h1><p class="title3">Discover what we can do for you.</p>';
  107.         }
  108.     }
  109.       </script>
  110. </div>
  111. </body>
  112. </html>

关于相关页面的跳转 也可以用iframe标签 就不多赘述啦~  再见

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/247284
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号