Question

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

我现在要做的是，只要点击另一个按钮，就可以使点击按钮停留在悬停效果中。我看了几篇关于add函数的帖子，但可能无法使它工作。我希望有人能够并愿意帮助我！

以下是我的代码：

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;}

如果还需要其他任何东西，请告诉我！：）

Answer 1

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

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

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

JSFiddle

Answer 2

假设按钮是

<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>

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

2 个答案: