HTML如何使用target选择器设置隐藏/显示
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>作业2</title>
<style type="text/css">
<!--
h1,h2,h3,h4,h5,h6{text-align: center}
div>a{color: #A72325; text-decoration: none}
p:nth-of-type(2n){color: #214DD6}
p:nth-of-type(2n-1){color: #1CDC15}
-->
</style>
</head>
<body>
<div align="center">
<div>
<h1>网页设计软件列表（点击查看）</h1>
</div>
<hr>
<div>
<a href="#">Photoshop</a>
<a href="#">illustrator</a>
<a href="#">Dreamweaver</a>
<a href="#">Fireworks</a>
</div>
<hr>
<div>
<img src="../html作业/图片/1.jpg" alt="图片1">
<p>这是一个photoshop软件</p>
<p>photoshop功能强大，可以处理图形</p>
<p>我们要学习使用它</p>
<p>--------------</p>
</div>
<div>
<img src="../html作业/图片/2.jpg" alt="图片2">
<p>这是illustrator软件</p>
<p>illustrator也很实用</p>
<p>但不清楚怎么用的</p>
<p>--------------</p>
</div>
<div>
<img src="../html作业/图片/3.jpg" alt="图片3">
<p>这是Dreamweaver软件</p>
<p>现在在用的就是这个软件</p>
<p>学习ing</p>
<p>--------------</p>
</div>
<div>
<img src="../html作业/图片/4.jpg" alt="图片4">
<p>这是FireWorks软件</p>
<p>是用来做图的软件</p>
<p>依旧不会用</p>
<p>--------------</p>
</div>
</div>
</body>
</html>
如图，现在要做成这种类型，内容部分初始是隐藏的，然后点击上面导航栏的超链接可以显示这一块的内容，点击另一个超链接会把原内容位置替换掉并显示当前内容。这个target选择器应该怎么用，网上没有看懂，最好有一个示例就行
用target伪类即可，给href添加hash值，对应div添加上id
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>作业2</title>
<style type="text/css">
<!--
h1, h2, h3, h4, h5, h6 {
text-align: center
}
div > a {
color: #A72325;
text-decoration: none
}
p:nth-of-type(2n) {
color: #214DD6
}
p:nth-of-type(2n-1) {
color: #1CDC15
}
#Photoshop, #illustrator, #Dreamweaver, #Fireworks {
display: none
}
#Photoshop:target, #illustrator:target, #Dreamweaver:target, #Fireworks:target {
display: block
}
-->
</style>
</head>
<body>
<div align="center">
<div>
<h1>网页设计软件列表（点击查看）</h1>
</div>
<hr>
<div class="tabs">
<a href="#Photoshop">Photoshop</a>
<a href="#illustrator">illustrator</a>
<a href="#Dreamweaver">Dreamweaver</a>
<a href="#Fireworks">Fireworks</a>
</div>
<hr>
<div id="Photoshop">
<img src="../html作业/图片/1.jpg" alt="图片1">
<p>这是一个photoshop软件</p>
<p>photoshop功能强大，可以处理图形</p>
<p>我们要学习使用它</p>
<p>--------------</p>
</div>
<div id="illustrator">
<img src="../html作业/图片/2.jpg" alt="图片2">
<p>这是illustrator软件</p>
<p>illustrator也很实用</p>
<p>但不清楚怎么用的</p>
<p>--------------</p>
</div>
<div id="Dreamweaver">
<img src="../html作业/图片/3.jpg" alt="图片3">
<p>这是Dreamweaver软件</p>
<p>现在在用的就是这个软件</p>
<p>学习ing</p>
<p>--------------</p>
</div>
<div id="Fireworks">
<img src="../html作业/图片/4.jpg" alt="图片4">
<p>这是FireWorks软件</p>
<p>是用来做图的软件</p>
<p>依旧不会用</p>
<p>--------------</p>
</div>
</div>
</body>
</html>
纯原生js可以使用display来显示隐藏,也可以使用dom方式显示隐藏,下面给出display的方式显示隐藏
例子如下
有帮助请点击右上角的采纳,谢谢
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>作业2</title>
<style type="text/css">
<!--
h1, h2, h3, h4, h5, h6 {
text-align: center
}
div > a {
color: #A72325;
text-decoration: none
}
p:nth-of-type(2n) {
color: #214DD6
}
p:nth-of-type(2n-1) {
color: #1CDC15
}
-->
</style>
<script type="text/javascript">
function setshow(id) {
switch (id) {
case 1:
document.getElementById("1").style.display = "block"
document.getElementById("2").style.display = "none"
document.getElementById("3").style.display = "none"
document.getElementById("4").style.display = "none"
break
case 2:
document.getElementById("1").style.display = "none"
document.getElementById("2").style.display = "block"
document.getElementById("3").style.display = "none"
document.getElementById("4").style.display = "none"
break
case 3:
document.getElementById("1").style.display="none"
document.getElementById("2").style.display="none"
document.getElementById("3").style.display="block"
document.getElementById("4").style.display="none"
break
case 4:
document.getElementById("1").style.display='none'
document.getElementById("2").style.display='none'
document.getElementById("3").style.display='none'
document.getElementById("4").style.display='block'
break
}
}
</script>
</head>
<body>
<div align="center">
<div>
<h1>网页设计软件列表（点击查看）</h1>
</div>
<hr>
<div>
<a href="#" onClick="setshow(1)">Photoshop</a>
<a href="#" onClick="setshow(2)">illustrator</a>
<a href="#" onClick="setshow(3)">Dreamweaver</a>
<a href="#" onClick="setshow(4)">Fireworks</a>
</div>
<hr>
<div id="1" style="display:block">
<img src="../html作业/图片/1.jpg" alt="图片1">
<p>这是一个photoshop软件</p>
<p>photoshop功能强大，可以处理图形</p>
<p>我们要学习使用它</p>
<p>--------------</p>
</div>
<div id="2" style="display: none">
<img src="../html作业/图片/2.jpg" alt="图片2">
<p>这是illustrator软件</p>
<p>illustrator也很实用</p>
<p>但不清楚怎么用的</p>
<p>--------------</p>
</div>
<div id="3" style="display: none">
<img src="../html作业/图片/3.jpg" alt="图片3">
<p>这是Dreamweaver软件</p>
<p>现在在用的就是这个软件</p>
<p>学习ing</p>
<p>--------------</p>
</div>
<div id="4" style="display: none">
<img src="../html作业/图片/4.jpg" alt="图片4">
<p>这是FireWorks软件</p>
<p>是用来做图的软件</p>
<p>依旧不会用</p>
<p>--------------</p>
</div>
</div>
</body>
</html>
你说的应该是css吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 140px;
background: #222;
color: white;
position: relative;
}
#dialog,#dialog2 {
display: none;
}
#dialog:target,#dialog2:target {
display: block;
}
</style>
</head>
<body>
<div id="dialog">modal dialog</div>
<div id="dialog2">modal dialog2</div>
<a href="#dialog">show dialog</a>
<a href="#dialog2">show dialog2</a>
</body>
</html>
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632