问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

用#号实现web页面的无刷新跳转

头像
740174191
    741528

    图片描述

    我想做一个如图一样的Web客户端,点击左面的导航右面的页面实现无刷新跳转，
    就是当右面的页面变化时 路由主地址不变，如index.html/#页面一，求大神指点，或者给学习文档

    htmljavascript
    阅读 7.7k
    5 个回答
    得票最新
    头像
    mqycn
      2.1k1619

      楼上的回答的都是 tab，不知道题主是不是要的这个

      点击链接无刷新跳转

      前端（index.html）:

      <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
body{font-family:'Microsoft Yahei'}
#title{background:#666;color:#AAA;margin-bottom:20px;}
#title h1{padding:15px;}

#sider{background:#D5DADB;padding:10px;}
#sider h2{padding:10px;margin-top:10px;background:#A193B3;}
#sider h2 a{color:#FFF;}

#main{background:#A193B3;padding:15px;color:#FFF;min-height:400px;}
</style>
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div id="title">
        <h1>XX系统</h1>
      </div>
    </div>
    <div class="col-xs-3">
      <div id="sider">
      </div>
    </div>
    <div class="col-xs-9">
      <div id="main">
        请点击左侧链接测试
      </div>
    </div>
  </div>
</div>
<script>
$(function(){
    var load = function(url){
        $('#main').load(url + '?type=ajax&time=' + (new Date()).getTime());
    };
    var sider = '';
    for( var i = 1 ; i <= 5 ; i++ ){
        sider += '<h2><a href="server.php/' + i + '.html">页面' + i + '</a></h2>';
    }
    $('#sider').html(sider);
    $('body').click(function(event){
        if(event.target.tagName.toLowerCase() == 'a'){
            var url = $(event.target).attr('href');
            location.hash = url;
            load(url);
            return false;
        }
    });
    if( location.hash != '' ){
        load(location.hash.substr(1));
    }
});
</script>
</body>
</html>

      后台(server.php)：

      <?php
    define('SUFFIX', '.html');
    define('APP', 'server.php/');
    
    $page = $_SERVER['PATH_INFO'];
    if( !$page ){
        $page = 'index.html';
    }
    
    if( !isset($_GET['type']) || $_GET['type'] != 'ajax' ){
        //客户直接打开时，跳转
        header('Location: ../#' . $page);
        die();
    }
    
?><div class="panel panel-default">
    <div class="panel-heading"><h2><?php echo $page; ?></h2></div>
    <div class="list-group">
<?php
    for( $i = 0 ; $i < 10 ; $i++ ){
        $page_no = rand();
?>        <a class="list-group-item" href="<?php echo APP . $page_no . SUFFIX; ?>">页面<?php echo $page_no; ?></a>
<?php
    }
?>
    </div>
</div>
      头像
      安歌
        7k1313

        不限制语言和框架？单纯只说无刷新切换内容的方式：

        1. tab切换，单纯css或者用js或者jq实现。

        2. 无刷新更新数据和内容，Ajax实现

        3. 路由跳转，vue和angular等框架都可以实现
          但是题主给的样例是比较常见的tab切换样例，还是建议用这个来实现

        头像
        无意
          322
          头像
          吉米x
            491016

            用路由，angular，vue等等

            头像
            zengkan
              1.2k2622

              对应左边五个导航，右边可以写五个不同的内容。点击左边右边相对应的块显示，其他块隐藏。就是所谓的 tab 切换。
              要想实现 url 变化，可以给左边导航的外围 a 标签的 href 属性写成 "#block1"、"#block2"等。
              基本代码如下：

              <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{
      margin:0;
      padding:0;
    }
    #nav{
      float: left;
    }
    #nav>a{
      display: block;
    }
    #content{
      float: left;
    }
    #content>p{
      width:500px;
      height:500px;
      border:1px solid #000;
      display:none;
    }
  </style>
</head>
<body>
  <div id="nav">
    <a href="#block1">导航1</a>
    <a href="#block2">导航2</a>
    <a href="#block3">导航3</a>
    <a href="#block4">导航4</a>
    <a href="#block5">导航5</a>
  </div>
  
  <div id="content">
    <p>111111111111</p>
    <p>22222222222</p>
    <p>33333333333</p>
    <p>4444444444</p>
    <p>55555555555</p>
  </div>
  <script>
    var nav=document.getElementById('nav').getElementsByTagName('a');
    var block=document.getElementById('content').getElementsByTagName('p');
    for(var i=0;i<nav.length;i++){
     nav[i].setAttribute("index",i);
     nav[i].onclick=function(){
      //右边所有块隐藏
      for(var j=0;j<block.length;j++){
        block[j].style.display="none";
      }
      var index=this.getAttribute("index");
      //跟所点击导航相对应的块显示
      block[index].style.display="block";
     }
    }
  </script>
</body>
</html>
              撰写回答
              你尚未登录，登录后可以
              • 和开发者交流问题的细节
              • 关注并接收问题和回答的更新提醒
              • 参与内容的编辑和改进，让解决方法与时俱进
              推荐问题