使用伪类更改链接单击时的 div 背景和特征
Posted
技术标签:
【中文标题】使用伪类更改链接单击时的 div 背景和特征【英文标题】：Change div background and characteristics on link click using pseudo classes 【发布时间】：2022-01-24 05:35:08 【问题描述】：大家好。我有一个关于单击链接时更改 div 元素的问题。
我所拥有的是 2 个名为 LINK 1 和 LINK 2 的链接，它们以水平顺序排列在代码的头部。然后左边有2个div，垂直排列，分别命名为DIV 1和DIV 2。它的作用是让特定的div在点击对应的链接时改变其背景颜色（LINK 1到DIV 1，反之亦然） .但是我遇到了无法更改 div 的问题。有没有办法纠正它？谢谢。
代码如下：
<!DOCTYPE html>
<head>
<style>
ul list-style-type: none; margin: 0; padding: 0; background-color: rgb(42,157,143);overflow: hidden;
lifloat: left;
li a:linkdisplay: block; color: black; padding: 10px; text-decoration: none;
li a:visitedcolor: orange;
li a:hover background-color: rgb(38,70,83); color: blue;
li a.active background-color: rgb(138,177,125); color: red;
div.top:hover center-align:0; margin:20px; width: 40%; border: solid; padding:0;
div.top: active center-align:0; margin:20px; width: 40%; border: solid; padding:0; background-color: green;
#link1:active div.top display: block;
div.bottom:hover center-align:0; margin:20px; width: 40%; border: solid; padding:0;
div.bottom: active center-align:0; margin:20px; width: 40%; padding:0; background-color: blue; border: 10px dotted green;
#link2:active div.bottom display: block;
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#link1" target="_blank">LINK 1</a></li>
<li><a href="#link2" target="_blank">LINK 2</a></li>
</ul>
</nav>
<div class="top"; style="center-align:0; margin:20px; width: 40%; border: solid; padding:0;">
<h1 style="text-align:center;"> DIV 1 <h1>
</div>
<div class="bottom"; style="center-align:0; margin:20px; width: 40%; border: solid; padding:0;">
<h1 style="text-align:center;"> DIV 2<p>
</div>
</body>
</html>
【问题讨论】：
【参考方案1】：点击链接 - 链接 1 和链接 2。这是你想要达到的目标吗？
alpha = (a) =>
if(a === 'div1')
document.getElementById(a).style.background = "yellow";
else
document.getElementById(a).style.background = "green";
div height:100px; width:100px; border: 2px solid black;<nav>
<ul>
<li><a onclick="alpha('div1')" >LINK 1</a></li>
<li><a onclick="alpha('div2')" >LINK 2</a></li>
</ul>
</nav>
<div id="div1"></div>
<div id="div2"></div>【讨论】：
以上是关于使用伪类更改链接单击时的 div 背景和特征的主要内容，如果未能解决你的问题，请参考以下文章
单击链接时如何使用 Javascript 更改部分 HTML？