Question

所以即时尝试让Jquery将特定的css更改为：之前如果div有一个特定的类

<ul>
 <li id="first" class="active">first</li>
 <li id="second">second</Li>
</ul>

如果第一个li处于活动状态，我希望：在Ul之前具有特定的左右属性，但如果第二个li处于活动状态，它将具有左右不同我用Jquery添加类，我试图做这样的事情

if ( $( "#first" ).is( "active" )) {
  $('ul[data-style-id='slider1']:before').append('<style>.left:175px;right:1188px;}</style>');
}

编辑：我有一个jquery代码，它给它左右属性，但它只适用于第一个，所以我试图做一个不同的脚本只改变第一个，因为该dident工作，我试图给它的属性，如答案，但具有每个LI的特定属性，但它再次起作用......它只读取第一个

https://jsfiddle.net/czf9kjfd/7/

在这里效果很好但是在我的浏览器中它很有用，所以我的问题是如果选择第一个链接我如何定义特定的左右参数

Answer 1

使用此

if( $('ul li').hasClass('active') ) {
   $('head').append('<style>ul:before{left:175px !important;right:1188px !important;}</style>');
}

在悬停中添加活动类

$("ul li").hover(function () {
   $(this).addClass("active");
},function(){
   $(this).removeClass("active");
 });

Answer 2

我根本不认为你需要jQuery，可以通过简单的CSS来完成：

<强> HTML

<ul>
<li id="first" class="line-item active">first</li>
<li id="second" class="line-item">second</Li>
</ul>

<强> CSS

.line-item { /* Styles */ }
.line-item::before { /* Styles */ }
.line-item.active { /* Styles */ }
.line-item.active::before {
  left: 175px !important;
  right: 1188px !important;
}

.line-item类仅用于持续参考。

希望它有所帮助！

更改css：在if和ID之前有一个特定的类

2 个答案: