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

740174191
  • 74

图片描述

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

回复
阅读 6.6k
5 个回答

楼上的回答的都是 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>

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

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

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

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

无意
  • 32

用路由,angular,vue等等

对应左边五个导航,右边可以写五个不同的内容。点击左边右边相对应的块显示,其他块隐藏。就是所谓的 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>
宣传栏