recherche

Maison  >  Questions et réponses  >  le corps du texte

javascript - Utilisez le signe # pour réaliser un saut de page Web sans actualisation

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

某草草某草草2755 Il y a quelques jours948

répondre à tous(5)je répondrai

  • 淡淡烟草味

    淡淡烟草味2017-05-19 10:44:18

    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>

    répondre
    0
  • 我想大声告诉你

    我想大声告诉你2017-05-19 10:44:18

    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>

    répondre
    0
  • PHP中文网

    PHP中文网2017-05-19 10:44:18

    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'ongletExemple, il est toujours recommandé d'utiliser ceci pour mettre en œuvre🎜🎜 🎜

    répondre
    0
  • 滿天的星座

    滿天的星座2017-05-19 10:44:18

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

    répondre
    0
  • PHP中文网

    PHP中文网2017-05-19 10:44:18

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

    répondre
    0
  • Annulerrépondre