gpt4 book ai didi

HTML 多个页面与 CSS 合而为一,没有 JS

转载 作者:太空狗 更新时间:2023-10-29 16:45:24 28 4
gpt4 key购买 nike

我看到一些网站使用 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>

http://jsfiddle.net/dq90d8ry/

最佳答案

您可以使用 :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>

样式规则首先将所有 P 隐藏在 DIV 中,然后覆盖作为当前目标的 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}

关于HTML 多个页面与 CSS 合而为一,没有 JS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34170344/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com