如何在javascript中点击更改css？答案

【问题标题】：How to change css on click in javascript?如何在javascript中点击更改css？
【发布时间】：2019-11-30 20:43:37
【问题描述】：

我的下拉导航菜单中的链接有问题。我认为问题是由于身体中的猫头鹰轮播造成的，因为当我检查导航项目（右键单击检查元素）时，控制台会突出显示 owl-carousel，当我将 .owl-carousel 显示更改为控制台中没有，则导航菜单中的链接将起作用（悬停时颜色更改，鼠标更改为指针）。因此，我想在切换菜单处于活动状态时（单击汉堡菜单时）将 .owl-carousel 显示更改为无。

var burgerMenu = function() {
  $("body").on("click", ".js-fh5co-nav-toggle", function() {
    $("#fh5co-nav > ul > li").css({ marginLeft: -50, opacity: 0 });
    $(this).toggleClass("active");

    var mainNav = $("#fh5co-main-nav");
    mainNav.slideToggle(400).toggleClass("active");

    if (mainNav.hasClass("active")) {
      menuAnimate(1, 0, 400, 200);
    } else {
      menuAnimate(0, -50, 1, 0);
    }
  });
};

<!-- Mobile Toggle Menu Button -->
<a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle"><i></i></a>
<!-- End Mobile Toggle Menu Button -->
<!-- Main Nav -->
<div id="fh5co-main-nav">
  <nav id="fh5co-nav" role="navigation">
    <ul class="nav">
      <li class="active"><a href="/index.html">Home</a></li>
      <li><a href="/about.html">About</a></li>
      <li><a href="/products.html">Products</a></li>
      <li><a href="/location.html">Location</a></li>
      <li><a href="/cafe.html">Cafe</a></li>
      <li><a href="/contact.html">Contact</a></li>
    </ul>
  </nav>
</div>
<!-- End Main Nav -->

我真的不知道该怎么做。我已经尝试添加：

$('.owl-carousel').css({display: none});

到 burgerMenu 函数，但这没有任何改变。

任何想法将不胜感激。

***编辑：谢谢！ .css({"display": "none"}) - 这有效，但我没有想到 - 其他页面没有猫头鹰轮播，我仍然遇到这个问题。我认为最好的办法是在单击导航菜单时让身体向下移动 - 这可能吗？有任何想法吗？再次感谢。

【问题讨论】：

您需要引用您的价值观，例如.css({"display": "none"})api.jquery.com/css
.css 中的括号是可选的。你可以简单地写成 .css("display", "none");
@RohanRao 如果不使用括号，则需要, 而不是:。您也只能使用该方法设置一个属性。
@bhmahler 哦，是的！我的错。刚从我脑海里走出来。谢谢指正。
谢谢！ .css({"display": "none"}) - 这有效，但我没有想到 - 其他页面没有猫头鹰轮播，我仍然遇到这个问题。我认为最好的办法是在单击导航菜单时让身体向下移动 - 这可能吗？有什么想法吗？

标签： javascript jquery html css

【解决方案1】：

或者，由于您没有动态 css，您可以使用另一个类和该类：

在您的 css 文件中：

.hidden {
  display: none;
}

还有你的js：

$('.owl-carousel').addClass("hidden");

【讨论】：

【解决方案2】：

$('.owl-carousel').css("display", "none");

试试这个而不是

$('.owl-carousel').css({display: none})

【讨论】：

【解决方案3】：

您可以执行以下代码。

$('#hello').click(function() {
    $('#hello').css({
        'background-color': 'blue',
        'color': 'white',
      'font-size' : '35px'
    });
});

#hello{
  cursor : pointer
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="hello">hello world!</div>

【讨论】：

【解决方案4】：

使用核心JS：

document.getElementById("my_custom_id").style.color="red";

在上面的代码行中你可以设置任何CSS，我将color 设置为red 为my_custom_id。

【讨论】：