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解决方案。通常，您实际上无法在CSS的click事件上更改某些内容。考虑以下解决方案：

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 2

执行此操作的一种常见做法是使用JavaScript，这被称为网络的编程语言。如果您以前从未使用过JavaScript，可能会使您感到困惑，但是如果您有使用其他通用编程语言（例如Python或Java）的经验，那么它就不需要花费很多时间。

要执行您的要求，有几种可能的方法。我将分享我认为最简单但不是最可靠的内容。当元素中发生某些特定事件时，可以使用JavaScript事件触发某些函数。例如，您可以这样修改HTML：

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

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

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

document.getElementsByClassName()函数是从页面中选择HTML元素并通过JavaScript对其进行修改的一种方法，我建议您查看W3Schools上非常好的JavaScript教程，以获得更多更好的方法，但这是总校长。然后，您可以根据需要修改HTML元素。

希望这会有所帮助！

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>

对类或ID进行操作会影响其他

4 个答案: