问使用伪类更改链接单击的div背景和特性
EN

Stack Overflow用户

提问于 2021-12-23 06:30:54

回答 1查看 56关注 0票数 1

伙计们，日安。当单击div元素的链接时，我有一个关于更改div元素的问题。

我所拥有的是，有两个链接名为链接1和链接2，按横向顺序排列在代码的头上。然后左边有2个DIV，垂直排列，命名为DIV 1和div 2。它确切地做的是当单击相应的链接(链接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;}
                li{float: left;} 
                li a:link{display: block; color: black; padding: 10px; text-decoration: none;}
                li a:visited{color: 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>

css

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-12-23 08:58:53

点击链接- link1 & link2。这是你想要达到的目标吗？

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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70458451

复制

相似问题

问使用伪类更改链接单击的div背景和特性
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用伪类更改链接单击的div背景和特性EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用伪类更改链接单击的div背景和特性
EN