对 class 或 id 执行操作会影响其他

Question

我正在处理一个 Web 表单 (html) 和一个 CSS 文件，我想知道我需要在 CSS 中编写什么来对一个类或 id 执行操作 - 影响另一个类或 id。例如：我有一个

<p class="hh">
    Hello!
</p>

(^^ 这个 p 标签的类是 "hh")

还有一个：

<p class="gb">
   Goodbye!
</p>

(^^ 这个p标签的类是"gb")

我想在 CSS 文件中写一些东西，这样每当我点击“hh”类中的任何内容时，它都会在“gb”类中做出一些改变，所以如果我点击文本“Hello！”它将使文本的颜色“再见！”绿色。请帮我！我试图找出如何做到这一点很长很长... 谢谢！

Answer 1

执行此操作的常见做法是使用 JavaScript，它被称为 Web 编程语言。如果您之前从未使用过 JavaScript，这可能会有点令人困惑，但如果您有其他通用编程语言（如 Python 或 Java）的经验，那么应该不会花太多时间来学习。

按照您的要求，有几种可能的方法可以做到这一点。我将分享我认为最简单但不是最强大的东西。当您的元素发生某些特定事情时，您可以使用 JavaScript 事件来触发某些功能。例如，您可以像这样修改您的 HTML：

<p class="hh" onclick="doSomething()">Hello!</p>

然后，在链接回您的 html 文件的单独 JavaScript 文件中或在您的 html 文件中，您将定义 doSomething() 函数：

function doSomething(){
     document.getElementsByClassName("gb")...
}

document.getElementsByClassName() 函数是从页面中选择 HTML 元素并通过 JavaScript 修改它的一种方法，我建议查看 W3Schools 上非常好的 JavaScript 教程以了解更多更好的方法，但这是一般原则.然后，您可以根据需要修改 HTML 元素。

希望这会有所帮助！

Answer 2

这听起来更像是您需要一个 javascript 解决方案。通常，您无法真正更改 CSS 中单击事件的某些内容。考虑以下解决方案：

const hh = document.getElementById("hh");
const gb = document.getElementById("gb");
hh.addEventListener("click", function() {
  gb.style.color = "green";
});
gb.addEventListener("click", function() {
  hh.style.color = "red";
});

<div id="hh">
  Hello!
</div>
<div id="gb">
  Goodbye!
</div>

Answer 3

您需要使用 JavaScript 来做到这一点。我已经附上了一个例子。

$(".one").on('click', function() {
  $(".two").css('color', 'red');
})

.one{ 
  cursor: pointer;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p class="one"> Change below text to RED </p>

<p class="two"> Black text </p>

Answer 4

有一种方法可以使用 :focus 状态来改变父母的外观，但无法区分是哪次点击导致父母聚焦。

这是一个使用 JavaScript 和 jQuery 的简单示例。

var helloEls = document.querySelectorAll('#jsTest .hh');
var goodbyeEls = document.querySelectorAll('#jsTest .gb');
helloEls.forEach(function(elem) {
    elem.addEventListener("click", function() {
      goodbyeEls.forEach(function(el) {
        if (el.className==='gb active'){
          el.className = 'gb';
        } else {
          el.className = 'gb active';
        }
       });
    });
});

var gbEls = $('#jqueryTest .gb');
$('#jqueryTest .hh').click(function(){
  if (gbEls.hasClass('active')){
    gbEls.removeClass('active');
    } else {
    gbEls.addClass('active');
    }
});

.gb.active {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="jsTest">
<p class="hh">
    Hello!
</p>
<p class="gb">
   Goodbye!
</p>
</div>

<div id="jqueryTest">
<p class="hh">
    Hello!
</p>
<p class="gb">
   Goodbye!
</p>
</div>