在单击按钮时激活按钮的悬停状态，直到单击另一个按钮(Javascript/JQuery）

Activating the hover state of a button when it's clicked until another button is clicked (Javascript/JQuery)

本文关键字：按钮 单击 Javascript 另一个 JQuery 激活 悬停 状态      更新时间：2023-09-26

我目前正在为我的自由职业者创建一个网站，并使用JQuery提供的click（）和load（）函数。一切都很好，我像往常一样通过 css 中的 classname：hover 添加了悬停效果。

我现在要做的是让点击的按钮保持悬停效果，只要点击另一个按钮。我看到了几篇关于添加功能的帖子，但无法使其工作。我希望这里有人能够并愿意帮助我！

这是我的代码：

.HTML

<div class="button" id="buttonHome">HOME</div>

.JS：

<script type="text/javascript">
    $(document).ready(function(){
        $('#buttonHome').click(function(){
            $("#content").load("includes/sample.html");
            $('button').addClass('hover');
        });
    })
</script>

.CSS：

.button{
    width: auto;
    height: 22px;
    float: left;
    cursor: pointer;
} .button:hover, .button.hover{border-bottom: thin solid #ffffff;color: #c4c4c4;}

如果还有什么需要，请告诉我！:)

假设按钮是

<div class="button">HOME</div>
<div class="button">ABOUT</div>
<div class="button">Contact</div>

现在是脚本部分 

<script>
  $(function() {
    $('.button').click(function() {
       $('.button').removeClass('active');
       var el = $(this);
       el.addClass('active');
    })

  })
</script>

现在是 css 部分 

<style>
  .active {
    background: yellow;
}
</style>

你的元素是一个<div>，而不是一个<button>，尽管它有类按钮，所以我认为你的意思是：

$(".button").addClass("hover");

在 jQuery 中，使用与 CSS 中使用的选择器相同的选择器定位元素，因此$("button")目标<button>元素，而$(".button")使用按钮类定位任何元素。

JSFiddle

相关文章：