javascript - 如果其他 div 的样式处于事件状态，则从一个 div 中删除样式

Question

我正在寻求帮助来处理我的 CMS 网站上的一些小事。

我想知道，如果可能的话，如何在网站的一个 div 中删除或隐藏样式，而另一个 div 处于事件状态，并且仅当第二个 div 在第一个 div 中时。

我正在使用 easytabs jQuery 插件并将 easytabs html 代码插入到 tinymce 所见即所得 HTML 源代码编辑器中，同时 <div class="block"></div>是从 CMS 生成的，因为它是内容模块的包装器。

让我向您展示我的代码，以便您可以更多地理解我想做的事情:

<div class="block">
<div id="tab-container" class="tab-container">
  <ul class='etabs'>
    <li class='tab'><a href="#tabs1-html">HTML Markup</a></li>
    <li class='tab'><a href="#tabs1-js">Required JS</a></li>
    <li class='tab'><a href="#tabs1-css">Example CSS</a></li>
  </ul>
  <div id="tabs1-html">
    <h2>HTML Markup for these tabs</h2>
    <!-- content -->
  </div>
  <div id="tabs1-js">
    <h2>JS for these tabs</h2>
    <!-- content -->
  </div>
  <div id="tabs1-css">
    <h2>CSS Styles for these tabs</h2>
    <!-- content -->
  </div>
</div>
</div>

<div class="block">
  <div class="test">
  </div>
</div>

好的，所以 CMS 正在添加 <div class="block"></div>有样式

(这就是样式):

#main .block {
    border: 2px solid #e0e0e0;
    padding: 24px 28px 24px 26px;
    margin: 0 0 8px;
    background: #ffffff;
    text-align: justify;
    overflow: auto;
}

问题来了。我想从此 <div class="block"></div> 中删除或隐藏样式元素只有当我有 <div id="tab-container" class="tab-container"></div>在这个 div 里面 <div class="block"></div> .

我需要保留 <div class="block"></div> 的所有样式当我在其中有其他 div 时。

是否可以使用某些 jQuery 或 JS？还是不可能？

提前致谢。

Answer 1

您可以使用 jQuery 中的 has() 函数来完成此操作。您将不得不重置或更改每个 CSS 值

$(document).ready(function() {
  $('.block').has('#tab-container.tab-container').css('border', '0');
});

.block {
  border: 2px solid red;
  margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block">
  <div class="some_tag">
    Text
  </div>
</div>

<div class="block">
  <div id="tab-container" class="tab-container">Some more text</div>
</div>

如果需要更改多个 CSS 值，您也可以这样做:

.css({ "border": "0", "background": "blue"})