communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
javascript - Utilisez le signe # pour réaliser un saut de page Web sans actualisation
某草草
某草草 2017-05-19 10:42:18
0
5
959

Je souhaite créer un client Web comme indiqué sur l'image. Cliquez sur la navigation à gauche pour accéder à la page de droite sans actualiser.
C'est-à-dire que lorsque la page de droite change, l'adresse de routage principale reste inchangée. tel que index.html/# Page 1, veuillez donner quelques conseils ou fournir des documents d'étude

某草草
某草草

répondre à tous(5)
淡淡烟草味
淡淡烟草味2017-05-19 10:44:18 5 plancher

correspond aux cinq navigations à gauche, et cinq contenus différents peuvent être écrits à droite. Cliquez sur les blocs correspondants à gauche et à droite pour les afficher, tandis que les autres blocs sont masqués. C'est ce qu'on appelle le changement d'onglet.
Pour changer l'url, vous pouvez écrire "#block1", "#block2", etc. dans l'attribut href de la balise périphérique a de la navigation de gauche.
Le code de base est le suivant : 

<!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>
  <p 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>
  </p>
  
  <p id="content">
    <p>111111111111</p>
    <p>22222222222</p>
    <p>33333333333</p>
    <p>4444444444</p>
    <p>55555555555</p>
  </p>
  <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>
Comme +0
Ajouter une réponse
我想大声告诉你
我想大声告诉你2017-05-19 10:44:18 4 plancher

Les réponses utilisent surtout la tabulation, je ne sais pas si la personne qui pose la question veut ça

Front-end (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>
<p class="container">
  <p class="row">
    <p class="col-xs-12">
      <p id="title">
        <h1>XX系统</h1>
      </p>
    </p>
    <p class="col-xs-3">
      <p id="sider">
      </p>
    </p>
    <p class="col-xs-9">
      <p id="main">
        请点击左侧链接测试
      </p>
    </p>
  </p>
</p>
<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>

Backend (serveur.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();
    }
    
?><p class="panel panel-default">
    <p class="panel-heading"><h2><?php echo $page; ?></h2></p>
    <p 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
    }
?>
    </p>
</p>
Comme +0
Ajouter une réponse
洪涛
洪涛2017-05-19 10:44:18 3 plancher

Aucune restriction sur les langages et les frameworks ? Parler simplement de la façon de changer de contenu sans actualiser :

  1. Le changement de tabulation peut être réalisé simplement avec css ou avec js ou jq. css或者用js或者jq实现。

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

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

Mettre à jour les données et le contenu sans actualisation, implémentation Ajax🎜🎜 🎜🎜Le saut d'itinéraire peut être implémenté par des frameworks tels que vue et angular
mais l'exemple donné par le sujet est un interrupteur d'ongletplus courant >Exemple, il est toujours recommandé d'utiliser ceci pour mettre en œuvre🎜🎜 🎜
Comme +0
Ajouter une réponse
滿天的星座
滿天的星座2017-05-19 10:44:18 2 plancher

Il s'agit d'un changement d'onglet, implémenté avec le pseudo-élément :target.
http://codepen.io/hzz/pen/RVNbyz

Comme +0
Ajouter une réponse
Ty80
Ty802017-05-19 10:44:18 1 plancher

Utiliser le routage, l'angulaire, la vue, etc.

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal