我已经看到一些使用CSS更改页面而不使用javascript的网站，他们使用主题标签来记住用户正在查看的页面。
输入url example.com/#page1的示例将显示page1等。
我已经用CSS和javascript做了一个例子，但如上所述，我想得到相同的结果，但只有CSS。
我的代码：
<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>
答案 0 :(得分：0)
您可以使用:target伪类：
我们来看一个例子。 （摘自w3.org）
它有一些带有相应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>
样式规则首先隐藏DIV中的所有P，但是然后覆盖作为当前目标的P的那个：
div.items p {display: none}
div.items p:target {display: block}
就是这样。
实际上，我们添加了'：not（：target）'，以确保只有CSS3浏览器才能隐藏元素。所以更好的规则是这些：
div.items p:not(:target) {display: none}
div.items p:target {display: block}
答案 1 :(得分：0)
这是一个快速的jquery示例：
的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＆amp; 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>
有一些快速代码可以帮助你处理一些jQuery，CSS和html选项卡
答案 2 :(得分：0)
这是一个纯粹的CSS示例：
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：
@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);
}
}
}