如果页面上显示元素B，则更改元素A的CSS

Question

我是jQuery的新手，所以通过阅读这里的其他文章已经提出了这段代码，但是我很难使其在我的网站上正常工作（仅供参考，我正在Webflow上构建）。

我想做的是：Example

我设计了一个轮播，如果您单击左侧的链接，它将在右侧的容器中显示不同的内容。不同信息的显示基于CSS3交互，这些交互可切换显示属性，而不是jQuery。

因此，如果元素B显示在网页上，则元素A的字体粗细，深灰色，侧面带有蓝色边框，表示这是活动的“链接”（实际上不是链接） ）。

这是我的代码示例（由于我是基于Webflow构建的，因此我自己在这里重新创建了html和CSS）：

HTML

<div class="carousel">
  <div class="on-load" id="on-load">Show on Load</div>
  <div class="dynamic-content" id="dc-1">Dynamic Content 1</div>
  <div class="dynamic-content" id="dc-2">Dynamic Content 2</div>
  <div class="dynamic-content" id="element-b">Element B</div>
  <div class="dynamic-content" id="dc-3">Dynamic Content 3</div>
  <div class="dynamic-content" id="dc-4">Dynamic Content 4</div>
  <div class="carousel-left">
    <div class="carousel-link" id="link-1">Link 1</div>
    <div class="carousel-link" id="link-2">Link 2</div>
    <div class="carousel-link" id="element-a">Element A</div>
    <div class="carousel-link" id="link-4">Link 4</div>
    <div class="carousel-link" id="link-5">Link 5</div>
  </div>
</div>

CSS

.carousel {
  position: relative;
  width: 750px;
  height: 500px;
  display: inline-block;
}
.dynamic-content {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 65%;
  padding: 20px;
  display: none;
}
.on-load {
  position: absolute;
  top: 0px;
  right: 0px;
  padding: 20px;
  display: inline-block;
}
.carousel-left {
  position: relative;
  float: left;
  width: 35%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-itens: flex-end;
}

jQuery

var elemB = document.getElementById("element-b");
var elemA = document.getElementById("element-a");
  if(elemB.style.display = "inline-block"){
    elemA.style.color = "#505050";
    elemA.style.font-weight = "extra-bold";
    elemA.style.border-right = "6px solid #01aae4";
    }
  else{
    elemA.style.color = "#878787";
    }

谢谢！

Answer 1

您需要一些东西来触发检查以确定#element-b是否可见。

[下面，我建议在.carousel上单击事件处理程序，它是一个容器。然后，您可以在:visible语句中使用jQuery :visible选择器。

if

let elemB = $("#element-b");
let elemA = $("#element-a");

// Force the element b to be showing
elemB.show()

$(document).on("click", ".carousel", function() {
  if (elemB.is(":visible")) {
    console.log("Element B is visible.")
    elemA.css({
      "color": "#505050",
      "font-weight": "extra-bold",
      "border-right": "6px solid #01aae4"
    })
  } else {
    console.log("Element B is not visible.")
    elemA.css({
      "color": "#878787"
    })
  }
})

.carousel {
  position: relative;
  width: 750px;
  height: 500px;
  display: inline-block;
}

.dynamic-content {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 65%;
  padding: 20px;
  display: none;
}

.on-load {
  position: absolute;
  top: 0px;
  right: 0px;
  padding: 20px;
  display: inline-block;
}

.carousel-left {
  position: relative;
  float: left;
  width: 35%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-itens: flex-end;
}