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

最新推荐文章于 2021-03-29 05:01:44 发布

纽太普

最新推荐文章于 2021-03-29 05:01:44 发布

阅读量352

点赞数

文章标签： php无刷新跳转

我想做一个如图一样的Web客户端,点击左面的导航右面的页面实现无刷新跳转，

就是当右面的页面变化时路由主地址不变，如index.html/#页面一，求大神指点，或者给学习文档

就是 tab 切换，用 :target 伪元素实现。

http://codepen.io/hzz/pen/RVNbyz

用路由，angular，vue等等

对应左边五个导航，右边可以写五个不同的内容。点击左边右边相对应的块显示，其他块隐藏。就是所谓的 tab 切换。

要想实现 url 变化，可以给左边导航的外围 a 标签的 href 属性写成 “#block1″、”#block2″等。

基本代码如下：

<!DOCTYPE html>

<head>

<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>

</div>

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].οnclick=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>

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

前端(index.html):

<!DOCTYPE html>

<head>

<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>

</div>

请点击左侧链接测试

</div>

$(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">

<?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>

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

tab切换，单纯

css

或者用js或者jq实现。

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

路由跳转，

vue

和

angular

等框架都可以实现

但是题主给的样例是比较常见的

tab切换

样例，还是建议用这个来实现