masyarakat
Belajar
Perpustakaan Alatan
Alat AI
Masa lapang
cari
Melayu
javascript - Gunakan tanda # untuk merealisasikan lompatan bukan muat semula halaman web
某草草
某草草 2017-05-19 10:42:18
0
5
1014

Saya ingin membuat klien Web seperti yang ditunjukkan dalam gambar Klik navigasi di sebelah kiri untuk melompat ke halaman di sebelah kanan tanpa menyegarkan
Iaitu, apabila halaman di sebelah kanan berubah, alamat laluan utama kekal tidak berubah. seperti index.html/# Halaman 1, sila Beri sedikit nasihat atau sediakan dokumen pengajian

某草草
某草草

membalas semua(5)
淡淡烟草味
淡淡烟草味2017-05-19 10:44:18 Tingkat 5

Sesuai dengan lima navigasi di sebelah kiri, lima kandungan berbeza boleh ditulis di sebelah kanan. Klik pada blok yang sepadan di kiri dan kanan untuk memaparkannya, manakala blok lain disembunyikan. Ia dipanggil penukaran tab.
Untuk menukar url, anda boleh menulis "#block1", "#block2", dsb. pada atribut href persisian tag navigasi kiri.
Kod asas adalah seperti berikut: 

<!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>
Suka +0
Tambah Balasan
我想大声告诉你
我想大声告诉你2017-05-19 10:44:18 Tingkat 4

Jawapan di atas semua menggunakan tab, saya tidak tahu sama ada ini yang ditanyakan

Halaman hadapan (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 (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();
    }
    
?><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>
Suka +0
Tambah Balasan
洪涛
洪涛2017-05-19 10:44:18 Tingkat 3

Tiada sekatan pada bahasa dan rangka kerja? Hanya bercakap tentang cara menukar kandungan tanpa menyegarkan:

  1. Penukaran tab boleh dicapai hanya dengan css atau dengan js atau jq. css或者用js或者jq实现。

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

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

Kemas kini data dan kandungan tanpa menyegarkan, pelaksanaan Ajax🎜🎜 🎜🎜Lompatan laluan boleh dilaksanakan oleh rangka kerja seperti vue dan angular
tetapi contoh yang diberikan oleh subjek ialah suis tabyang lebih biasa >Contohnya, masih disyorkan untuk menggunakan ini untuk melaksanakan🎜🎜 🎜
Suka +0
Tambah Balasan
滿天的星座
滿天的星座2017-05-19 10:44:18 Tingkat 2

Ia adalah penukaran tab, dilaksanakan dengan :sasaran pseudo-elemen.
http://codepen.io/hzz/pen/RVNbyz

Suka +0
Tambah Balasan
Ty80
Ty802017-05-19 10:44:18 Tingkat 1

Gunakan penghalaan, sudut, vue, dsb.

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan