HTML中有多个页面，而且没有JS

Question

I've seen some websites that uses CSS to change page without using javascript and they use a hashtag to remember what page the user is viewing. 我见过一些网站使用CSS来改变页面而不使用javascript，他们使用hashtag来记住用户正在查看的页面。
Example typing the url example.com/#page1 would show you page1 etc. 输入url example.com/#page1的示例会显示page1等。

I've made an example with CSS and javascript, but as mentioned above, I would like to get the same result but with only CSS. 我用CSS和javascript做了一个例子，但如上所述，我想得到相同的结果，但只有CSS。

My code: 我的代码：

<head>
<style>
#content2 {
display:none;
}
</style>
</head>

<body>
<a href ="#link1" id="link1">Link 1</a>
<a href ="#link2" id="link2">Link 2</a>

<div id="content1">
Content of page 1 (Link 1)
</div>

<div id="content2">
Content of page 2 (Link 2)
</div>

<script>
var hash = window.location.hash;
// Show a page based on # ( so a user can LINK to a specific page)

//Page 1
if(hash == "#link1") {
$("#content1").css("display","block");
}
$("#link1").click(function() {
$("#content1").show();
$("#content2").hide();
});

//Page2
if(hash == "#link2") {
$("#content2").css("display","block");
}
$("#link2").click(function() {
$("#content2").show();
$("#content1").hide();
});
</script>
</body>

http://jsfiddle.net/dq90d8ry/ http://jsfiddle.net/dq90d8ry/

Answer 1

You can use :target pseudo class: 您可以使用：target伪类：

Let's see an example. 我们来看一个例子吧。 (Example extracted from w3.org ) （从w3.org中提取的示例）

It has some links and elements with corresponding IDs: 它有一些带有相应ID的链接和元素：

<p>
  <a href="#item1">item 1</a>
  <a href="#item2">item 2</a>
  <a href="#item3">item 3</a>
  <a href="#default">clear</a>

<div class="items">
  <p id="item1">... item 1...
  <p id="item2">... item 2...
  <p id="item3">...
  <p id="default"><!-- by default, show no text -->
</div>

The style rules first hide all the Ps inside the DIV, but then override that for the P that is the current target: 样式规则首先隐藏DIV中的所有P，但是然后覆盖当前目标P的那个：

div.items p {display: none}
div.items p:target {display: block}

That's all. 就这样。

Actually, we added ':not(:target)', to assure that only CSS3 browsers will hide the element. 实际上，我们添加了'：not（：target）'，以确保只有CSS3浏览器才能隐藏元素。 So the better rules are these: 所以更好的规则是这些：

div.items p:not(:target) {display: none}
div.items p:target {display: block}

Answer 2

Here is a quick jquery example: 这是一个快速的jquery示例：

Css: CSS：

#tabs {

width: 100%;
height:30px; 
border-bottom: solid 1px #CCC;
padding-right: 2px;
margin-top: 30px;


}
a {cursor:pointer;}

#tabs li {
float:left; 
list-style:none; 
border-top:1px solid #ccc; 
border-left:1px solid #ccc; 
border-right:1px solid #ccc; 
margin-right:5px; 
border-top-left-radius:3px;  
border-top-right-radius:3px;
  outline:none;
}

#tabs li a {

font-family:Arial, Helvetica, sans-serif; 
font-size: small;
font-weight: bold; 
color: #5685bc;;
   padding-top: 5px;
   padding-left: 7px;
   padding-right: 7px;
padding-bottom: 8px; 
display:block; 
background: #FFF;
border-top-left-radius:3px; 
border-top-right-radius:3px; 
text-decoration:none;
outline:none;

}

#tabs li a.inactive{
padding-top:5px;
padding-bottom:8px;
  padding-left: 8px;
  padding-right: 8px;
color:#666666;
background: #EEE;
 outline:none;
 border-bottom: solid 1px #CCC;

}

#tabs li a:hover, #tabs li a.inactive:hover {


color: #5685bc;
  outline:none;
}

.container {

clear:both;           
width:100%; 

text-align:left;
  padding-top: 20px;

}

 .container h2 { margin-left: 15px;  margin-right: 15px;  margin-bottom:    10px; color: #5685bc; }

 .container p { margin-left: 15px; margin-right: 15px;  margin-top: 10px;    margin-bottom: 10px; line-height: 1.3; font-size: small; }

.container ul { margin-left: 25px; font-size: small; line-height: 1.4; list-       style-type: disc; }

.container li { padding-bottom: 5px; margin-left: 5px;}

#tab1C {
    font-family: sans-serif;
}

#tab2C {
font-family: sans-serif;
}

HTML & JS: HTML和JS：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>Tabbed Structure - Regular</title>
<link href="css/help.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script>
$(document).ready(function() {

$('#tabs li a:not(:first)').addClass('inactive');
$('.container').hide();
$('.container:first').show();

$('#tabs li a').click(function(){
var t = $(this).attr('id');
   if($(this).hasClass('inactive')){ //this is the start of our condition
$('#tabs li a').addClass('inactive');
$(this).removeClass('inactive');

$('.container').hide();
$('#'+ t + 'C').fadeIn('slow');
   }
  });

  });

  </script>
  </head>


  <body>
  <ul id="tabs">

  <li><a id="tab1">Tab1</a></li>
  <li><a id="tab2">tab2</a></li>
  <li><a id="tab3">tab3</a></li>
  <li><a id="tab4">tab4</a></li>

    </ul>
      <div class="container" id="tab1C">
         this is tab1 so
      </div>
      <div class="container" id="tab2C">
        this is tab2 so
      </div>
      <div class="container" id="tab3C">this is tab3 so</div>
      <div class="container" id="tab4C">this is tab4 so</div>

    </body>
    </html>

There is some quick code to help you on some jQuery, CSS and html tabs 有一些快速代码可以帮助您处理一些jQuery，CSS和html选项卡

Answer 3

Here is a pure css example: 这是一个纯粹的CSS示例：

HTML: HTML：

<h1>Pure CSS Tabs <span>Just CSS, No JS!</span></h1>
<ul class="tabs">
<li>
    <input type="radio" name="tabs" id="tab1" checked />
    <label for="tab1">Description</label>
    <div id="tab-content1" class="tab-content">
      <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do     eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim     veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum     dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,     sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        </div>
        </li>

    <li>
    <input type="radio" name="tabs" id="tab2" />
    <label for="tab2">Specification</label>
    <div id="tab-content2" class="tab-content">
      <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem     accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo     inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia     consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci     velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla?</p>
        </div>
    </li>
</ul>

<br style="clear: both;" />

<p class="link">See the <a href="http://codepen.io/wallaceerick/pen/IGxim">3D Box</a> demo!</p>

CSS: CSS：

@import "compass/css3";

@import url("http://fonts.googleapis.com/css?family=Lato");

$background: #9b59b6;
$tabs-base-color: #8e44ad;
* {
  margin: 0;
  padding: 0; 
  @include box-sizing(border-box);
}
body {
  padding: 20px;
  text-align: left;
  font-family: Lato;
  color: #fff; 
  background: $background;  
}
h1 {
  font-weight: normal;
  font-size: 40px;
  font-weight: normal;
  text-transform: uppercase;
  float: left;
  margin: 20px 0 100px 10px; 
  span { 
    font-size: 13px;
    display: block;
    padding-left: 4px;
  }
}
.tabs {
  width: 650px;  
  float: none;
  list-style: none;
  position: relative;
  margin: 80px 0 0 10px;
  text-align: left;
  li {
    float: left;
    display: block;
  }
  input[type="radio"] {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  label {
    display: block;
    padding: 14px 21px;
    border-radius: 2px 2px 0 0;
    font-size: 20px;
    font-weight: normal;
    text-transform: uppercase;
    background: $tabs-base-color;
    cursor: pointer;
    position: relative;
    top: 4px; 
    @include transition(all 0.2s ease-in-out);
    &:hover {
      background: darken($tabs-base-color, 10);
    }
  }
  .tab-content{
    z-index: 2;
    display: none; 
    overflow: hidden;
    width: 100%;
    font-size: 17px;
    line-height: 25px;
    padding: 25px;  
    position: absolute;
    top: 53px;
    left: 0; 
    background: darken($tabs-base-color, 15);
  }
  //The Magic
  [id^="tab"]:checked + label { 
    top: 0;
    padding-top: 17px; 
    background: darken($tabs-base-color, 15); 
  }
  [id^="tab"]:checked ~ [id^="tab-content"] {
    display: block;
  }
}
p.link {
  clear: both;
  margin: 380px 0 0 15px;
  a {
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    color: #fff;
    padding: 5px 10px;
    margin: 0 5px;
        background-color: darken($tabs-base-color, 15);
    @include transition(all 0.2s ease-in);
    &:hover {
      background-color: darken($tabs-base-color, 20);
    }
  }
}

this code is from: http://codepen.io/wallaceerick/pen/ojtal 此代码来自： http ： //codepen.io/wallaceerick/pen/ojtal

HTML中有多个页面，而且没有JS

问题描述

3 个解决方案

解决方案1
0 已采纳 2015-12-09 03:55:33

解决方案2
0 2015-12-09 03:56:03

解决方案3
0 2015-12-09 04:06:24

HTML中有多个页面，而且没有JS

问题描述

3 个解决方案

解决方案1 0 已采纳 2015-12-09 03:55:33

解决方案2 0 2015-12-09 03:56:03

解决方案3 0 2015-12-09 04:06:24

解决方案1
0 已采纳 2015-12-09 03:55:33

解决方案2
0 2015-12-09 03:56:03

解决方案3
0 2015-12-09 04:06:24