Javascript 使用jquery onclick函数在按钮上添加和删除活动类_Javascript_Jquery_Html_Twitter Bootstrap

Javascript 使用jquery onclick函数在按钮上添加和删除活动类

javascript jquery html twitter-bootstrap

Javascript 使用jquery onclick函数在按钮上添加和删除活动类,javascript,jquery,html,twitter-bootstrap,Javascript,Jquery,Html,Twitter Bootstrap,我实际上是在引导中使用这个按钮组结构。现在，当我单击每个按钮时，我需要将类活动添加到它。当我点击另一个按钮时将其删除这是我的HTML结构，类似于： <body> <div id="header"> <div class="logo">Prova<span class="sec-logo">toscana</span>15</div> <div class="bottoni"&g

我实际上是在引导中使用这个按钮组结构。现在，当我单击每个按钮时，我需要将类活动添加到它。当我点击另一个按钮时将其删除

这是我的HTML结构，类似于：

<body>
    <div id="header">
        <div class="logo">Prova<span class="sec-logo">toscana</span>15</div>
        <div class="bottoni">
            <div class="btn-group" role="group" aria-label="...">
                <button type="button" class="btn btn-default" id="b1">12345</button>
                <button type="button" class="btn btn-default" id="b2">12345</button>
                <button type="button" class="btn btn-default" id="b3">12345</button>
                <button type="button" class="btn btn-default" id="b4">12345</button>
                <button type="button" class="btn btn-default" id="b5">12345</button>
                <button type="button" class="btn btn-default" id="b6">12345</button>
            </div>
        </div>
    </div>
</body>


Provatoscana15
12345
12345
12345
12345
12345
12345

谁能帮我？谢谢。

您正在寻找以下产品：

$('.btn').on('click', function(){
    $(this).siblings().removeClass('active'); // if you want to remove class from all sibling buttons
    $(this).toggleClass('active');
});

您应该在此处使用.each（）和.click（）的组合。因此，它将针对每个按钮，而不仅仅是第一个按钮

$('#header .btn').each(function(){
    $(this).click(function(){
        $(this).siblings().removeClass('active'); // if you want to remove class from all sibling buttons
        $(this).toggleClass('active');
    });
});

如果单击

.active

按钮后不应从active按钮中删除类，请使用

addClass

而不是

toggelClass

$("#header .btn-group[role='group'] button").on('click', function(){
    $(this).siblings().removeClass('active')
    $(this).addClass('active');
})

缩小按钮选择范围也是一种很好的做法，我使用了

#heade

id和

.btn group[role='group']

，这使得脚本仅应用于所有按钮组中的按钮上，即ide

这里有

.active

类定义：

.btn.active{
    background-color: red;
}

我希望这会对你有所帮助，因为它对我非常有效

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".btn").each(function(){
       $(this).click(function(){
          $(this).addClass("active");
          $(this).siblings().removeClass("active");
       });
    });
});
</script>


$（文档）.ready（函数（）{
$（“.btn”）。每个（函数（）{
$（此）。单击（函数（）{
$（此）.addClass（“活动”）；
$（this.sides（）.removeClass（“活动”）；
});
});
});

试试这个

到目前为止你都试了些什么？请提供示例代码以及您遇到的问题的详细信息。如果JSFIDLE工作正常，请尝试此操作。。。（它实际上是有效的），我认为它是有效的（您可以在打开控制台的elements选项卡中进行测试）。也许您正在寻找另一种解决方法？jQuery的类选择器引用具有指定类的所有元素，因此，您正在执行一个不需要的循环。在这种情况下，我们可以以继承的方式正确指定它，但循环是必需的。因为它需要检查它是否正在单击当前按钮，并且对于它的所有同级，类都需要删除