仅当代码中其他地方存在 class 时，如何应用 CSS？

Question

所以我只想在其他地方的代码中存在 class 时才应用某个 CSS。我想知道这是否只能通过 css 实现，或者我是否需要为此使用 Jquery。有人对此有任何想法吗？如果我需要使用 Jquery，你能举个例子吗？

正如您在我的代码中看到的，我尝试做的是在 li.active 存在时应用 margin-top。

显然我的 jsfiddle 不工作：http://jsfiddle.net/zt40oa7d/

或者看下面的代码：

div.navbar {
  background-color: #CCF;
}
ul.box {
  margin: 0;
}
div.text {
  background-color: #FFC;
  padding: 10px;
}
div.page div.navbar ul.box li.active div.text {
  margin-top: 100px;
}

<div class="page">
  <div class="navbar">
    <ul class="box">
      <li class="active"><a href="#">Link 1</a>
      </li>
    </ul>
  </div>
  <div class="text">This the div that should go down due to the submenu ul</div>
</div>

Answer 1

使用jquery，你可以在文档准备好class .active 找到li 元素的长度，如果是，则将css 设置为div class .text:

$(function(){
if($('.active').length){
     $('div.text').css(' margin-top',' 100px');
}});

Working Demo

Answer 2

是的，它很有可能做到这一点，它在 JQuery 中调用了 addClass() 方法，它的用法是这样的

$( "div" ).addClass( "text" );

依次将此 CSS 添加到您的元素中

.text
{
   background-color: #FFC;
   padding: 10px;
}

这将产生this fiddle.

所示的效果

您也可以使用 $( "div" ).removeClass( "text" );

删除它

编辑

您还可以使用 JQuery 中的 hasClass() 方法检查活动 class 是否存在，如下所示：

if( $("li").hasClass( "active" ) )
{
  $( "#specificDiv" ).addClass( "text" );
}

还有你的HTML更新

<div class="page">
  <div class="navbar">
    <ul class="box">
      <li class="active"><a href="#">Link 1</a>
      </li>
    </ul>
  </div>
  <div id="specificDiv">This the div that should go down due to the submenu ul</div>
</div>

此处您正在检查 <li> 是否分配有 class "active"。如果这样做，它将在包含 id "specificID" 的元素上设置 css "text"，但不会影响任何其他 div。

看看这是做什么的here

阅读有关 JQuery addClass() 方法的更多信息 here。

阅读有关 JQuery hasClass() 方法的更多信息 here。

Answer 3

像这样应该可以解决问题：

$('.box li').each(function() {
    if($(this).hasClass('active')) {
        // add your margin-top here
    }
});

Answer 4

如果您只是想在某些 li > a 已被某些 div 应用规则单击...您只能CSS

.text {
    display: none;
    background-color:#FFC;
    padding:10px;
}
.text:target {
    display:block;
}
#text1 {
    background: #bada55;
}
#text2 {
    background: #639;
}
#text3 {
    background: tomato;
}

html

<div class="page">
    <div class="navbar">
        <ul class="box">
            <li><a href="#text1">Test dropdown 1</a>
            </li>
            <li><a href="#text2">Test dropdown 2</a>
            </li>
            <li><a href="#text3">Test dropdown 3</a>
            </li>
        </ul>
    </div>
    <div id="text1" class="text">
        <h1>Foo</h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima aspernatur qui excepturi quas non tempore deserunt neque eos ducimus nobis tempora nam beatae aliquam necessitatibus aliquid accusantium vel libero cumque!
    </div>
    <div id="text2" class="text">
        <h1>Bar</h1>This the div that should go down due to the submenu ul
    </div>
    <div id="text3" class="text">
        <h1>Baz</h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus impedit quam cum. Sit quaerat architecto maiores veritatis labore minus dolorem earum sint sapiente est pariatur accusamus ducimus dolore sunt ipsa!
    </div>
</div>

Answer 5

你可以这样做。检查 li 的 ul 标签 children() 是否有 '.active' class 。如果确实有，则将 attr 设置为 id '#textdiv' 的活动，如下所示：

写这个（在你的 'active' class 中添加 id）：

<div id="textdiv" class="text">div text</div>

jquery

$(document).ready(function(){
   var a = $("ul.box").children('li').hasClass('active');

   if (a == true) {
     alert("asdf");
     $("#text").attr("class","text");
   }
});

Answer 6

我同意 Milind Anantwar 使用 jQuery 的回答。

但是我会更具体地说明我的 if。

$('.active')

将 return 具有 class 的任何元素激活

$('li.active')

将 return li 元素 class 激活

if ($('li.active').length) { ... }

仅当代码中其他地方存在 class 时，如何应用 CSS？

How to apply CSS only if class exists elsewhere in code?

css

jquery

if-statement

jquery