如果另一个 div 的样式处于活动状态，则从一个 div 中删除样式

Question

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

我想知道，如果可能的话，如何从一个 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 <div class="block"></div>.

中有 <div id="tab-container" class="tab-container"></div> 时

当我有其他 div 时，我需要保留 <div class="block"></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"})

Answer 2

而不是重置或覆盖所有块 classes 也许添加会更容易：

$(document).ready(function () {
           $('.block').has('div.tab-container').removeClass('block');
        });

这样您将删除块 class 因此没有样式。

JSFIDDLE

如果另一个 div 的样式处于活动状态，则从一个 div 中删除样式

Remove styles from one div if other div's styles are active

html

javascript

css

jquery

content-management-system