HTML多页合一，带有CSS，无JS_Html_Css

HTML多页合一，带有CSS，无JS

html css

HTML多页合一，带有CSS，无JS,html,css,Html,Css,我见过一些网站使用CSS来更改页面，而不使用javascript，它们使用标签来记住用户正在查看的页面。示例键入url Example.com/#page1会显示page1等我已经用CSS和javascript做了一个例子，但是如上所述，我希望得到相同的结果，但是只使用CSS 我的代码： <head> <style> #content2 { display:none; } </style> </head> <body> <

我见过一些网站使用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>


#内容2{
显示：无；
}
第1页内容（链接1）
第2页内容（链接2）
var hash=window.location.hash；
//基于#显示页面（以便用户可以链接到特定页面）
//第1页
如果（散列=“#链接1”）{
$（“#content1”）.css（“显示”、“块”）；
}
$（“#link1”）。单击（函数（）{
$（“#content1”）.show（）；
$（“#content2”）.hide（）；
});
//第2页
如果（散列=“#链接2”）{
$（“#content2”）.css（“显示”、“块”）；
}
$（“#link2”）。单击（函数（）{
$（“#content2”）.show（）；
$（“#content1”）.hide（）；
});

您可以使用伪类：

让我们看一个例子。（示例摘自）

它有一些带有相应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>

就这些

实际上，我们添加了“：not（：target）”，以确保只有CSS3浏览器会隐藏该元素。因此，更好的规则是：

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

下面是一个快速jquery示例：

Css:

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>


Tabbed结构-正则
$（文档）.ready（函数（）{
$（'#tabs li a:not（：first））.addClass（'inactive'）；
$（'.container'）.hide（）；
$（'.container:first'）.show（）；
$（'a'）。单击（函数（）{
var t=$（this.attr（'id'）；
if（$（this.hasClass（'inactive'））{//这是条件的开始
$（'a'）.addClass（'inactive'）；
$（this.removeClass（'inactive'）；
$（'.container'）.hide（）；
$（'#'+t+'C'）.fadeIn（'slow'）；
}
});
});

表1
表2
表3
表4

这是表1
这是表2
这是表3
这是表4

在一些jQuery、CSS和html选项卡上有一些快速代码可以帮助您

这里是一个纯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>

此代码来自：

使用此：或者顺便说一句，它们是选项卡式内容而不是页面。它们不会更改页面，而是滚动到页面中的现有div。所以，如果你点击了我想我想要的标签，但你怎么能使用户友好？如果可能的话，我希望用户能够在没有JS的情况下链接到一个特定的“标签”。丹尼斯，把代码笔和Manoj链接起来。答案就在那里。在这个例子中，他们的做法是对一些单选按钮输入进行样式化，然后根据它们是否被选中来设置样式规则。我添加了一个纯css示例check it out我将对此进行检查。如果用户在example.com/#item2中键入，这是否会显示用户item2？是。它起作用了。检查我为w3.org提供的链接。这正是我想要的。为什么要否决这个帖子？确实有。你应该更新你的答案，包括一个更好的例子，以防其他人正在寻找这个。目前，你答案中的大部分代码都在W3上：谢谢你的答案，但我不想使用JS。如果可能的话，我看到了你的编辑，这是一个很好的答案，但仍然使用JSJavascript@DennisEnstr我又加了一个

<!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>

<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>

@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);
    }
  }
}