使用 jquery 更改 css 值答案

【问题标题】：use jquery to change css values使用 jquery 更改 css 值
【发布时间】：2014-11-07 11:08:58
【问题描述】：

我试图通过使用:focus 和tabindex 与<div> 交互的方法使用纯CSS 来做到这一点，但是当我尝试通过HTML 添加视频时，它破坏了这一切，所以我不得不求助于 jQuery。

我是 JavaScript 新手，但我想做的是，当您单击 #about_me.tab:before 元素时，它会将 #about_me.tab 移动到 0vh 并将其 z-index 更改为 5，然后更改box-shadow 但这不起作用任何人都可以看到问题还是 HTML 或 CSS

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#about_me.tab:before").click(function(){
    $("#about_me.tab").css({"transition":"top 1s, z-index 0s","top":"0vh","z-index":"5","box-shadow":"0 0 8vw black"});
  });
});
</script>

印地

【问题讨论】：

什么“不起作用”？它是否触发了点击事件处理程序？如果不是，那么您的第一个选择器是错误的，如果它正在触发 - 您的第二个选择器是错误的。
你不能通过 jQuery/JS 选择伪元素，因为它们不在 DOM 中。
您是否考虑过对答案做出某种反应？ :)

标签： javascript jquery html css pseudo-element

【解决方案1】：

你应该使用 jQuery 选择器而不是使用伪元素：

 $("#about_me.tab").prev().click(function(){
    $("#about_me.tab").css({"transition":"top 1s, z-index 0s","top":"0vh","z-index":"5","box-shadow":"0 0 8vw black"});
 });

或

 $("#about_me.tab").click(function(){
    $("#about_me.tab").prev().css({"transition":"top 1s, z-index 0s","top":"0vh","z-index":"5","box-shadow":"0 0 8vw black"});
 });

【讨论】：

【解决方案2】：

jQuery

$("#about_me.tab").addClass('shadow');

CSS

.shadow{
//Your style

}

【讨论】：