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

我想做一个如图一样的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切换

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

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

ajax ssm 页面跳转_ssm项目实战实现页面的局部刷新功能
好的各位小伙伴继续学习知识了 ajax_json 咱们之前用SSM三大框架整合,实现了用户的增删改查功能.今天主要是将之前实现的用户功能,修改成 ajax 的方式,实现页面的局部刷新功能. 首先来实 ...
【页面无响应】Web页面经常无响应前端如何定位与优化(已解決)
[写在前面]客户现场应用我们的系统时候,发现用着用着就出现1个页面无响应现象,给客户带来极其不好的体验,尤其是当重要工作汇报演示时,就给我看无响应,浏览器崩溃?这样对产品的发展无疑是致命的伤,那么如何 ...
ios开发跳转safari_阻止iOS Web APP中点击链接跳转到Safari 浏览器新标签页
最近为了更好地接触移动Web 开发狠心购买了一台ipad mini(之前一直都是借同学的,借多了就不好意思了).拿来调试DeveMobile 与EaseMobile 主题时候发现了不少问题,现在在一 ...
android weex跳转闪退,关于weex页面在android端跳转的问题
在weex页面中通过 navigator.push的方式跳转页面,而在android端是通过startActivity方法隐式跳转页面:所有展示weex页面的activity的intent-filte ...
EasyNVR、EasyDSS二次开发之：RTMP、HLS流在web页面进行无插件播放示例Demo代码
不管是基于EasyNVR还是EasyDSS,都是支持无插件直播,这也是未来视频直播的一个趋势.对于传统的浏览器插件播放谁用谁知道: 以上是软件自带播放展示背景需求对于EasyNVR和EasyDSS ...
php获取微信公众号用户信息头像,微信公众号的web页面如何获取微信用户名和头像？...
首先,你的网站入口必须是微信服务号(开通认证.拥有获取用户openid权限:订阅号是不行的). 方法:网页通过微信的Oauth2认证链接.(必须是微信的内置浏览器,通过微信服务号进入) 操作:通过服务 ...
web页面事件无响应，元素点击不到
有可能出现这种情况的原因就是:z-index属性设置成负值导致,点击页面时,获取不到焦点,无法触发事件. 转载于:https://www.cnblogs.com/chenjzblog/p/418609 ...
html页面每打开就刷新一次,让页面自动只刷新一次
让页面自动只刷新一次你在建设网站的时候有没有遇到如下情况呢: 1.网页的图片较多,而服务器也不是很好,所以每次打开网页后总有一.两幅图片无法显示,但刷新一遍后又全部可显示了. 2.第一次打开网页出现 ...
ajax无刷新留言板远吗,基于jquery实现ajax无刷新评论
基于jquery实现ajax无刷新评论发布于 2017-03-31 11:26:07 | 75 次阅读 | 评论: 0 | 来源: 网友投递 jQuery javascript框架jQuery是一个 ...

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

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

最新文章

热门文章