Question

我是网络开发的新手，我有一个非常微不足道的问题。

我有一个div，我有一个基于img的垂直菜单。在它的右侧，我有一个带文本内容的div。我想通过单击相应的img对象来更改此div的边框颜色。

请告诉我最简单的方法吗？

谢谢，对不起我的英语。

这些是菜单元素：

    <div class="menu-boczne"> 
    <img class="element-menu" src="obrazy/zap.png">
    <img class="element-menu" src="obrazy/wyst-czasowe.png">
    <img class="element-menu" src="obrazy/wyst-stale.png"> 
    <img class="element-menu" src="obrazy/dla-gr-i-szk.png"> 
    <img class="element-menu" src="obrazy/dz-sie.png"> 
    <img class="element-menu" src="obrazy/od-terenowe.png"> </div>

当我点击其中一个

时，我想更改内容div的border-color属性

Answer 1

我认为您正在寻找的是CSS Selectors，如之前在this question中所述。

将这些与:active结合使用应该是您正在寻找的。

另请注意，这不是严格的“onclick”，但实际上相同。这也可以使用JavaScript完成，但我假设您还没有使用过JS，所以我只提供了一个CSS示例。

div {
  height: 50px;
  width: 50px;
  float: left;
}
.image {
  background-color: green;
  border: 4px solid purple;
  text-align: center;
}
.content {
  background-color: blue;
  border: 4px solid yellow;
}
.image:active ~ .content {
  border: 4px solid red;
}
}

<div class="image">Image</div>
<div class="content">Text</div>

Answer 2

active命令仅适用于href链接。尝试编写一个简单的javascript命令。

<div class="menu-boczne"> 
<img class="element-menu" src="obrazy/zap.png" onclick="this.style.borderColor='color'>

通过单击位于其他div中的img链接来更改div边框颜色

2 个答案: