Question

我想在点击div中的标签时添加一个类。点击我要添加的课程＆＃34;显示＆＃34;。

我使用这个HTML：

<div class="liveChatContainer online">
<div class="actions">
<span class="item title">Need help?</span>
<a href="/test"><i class="fa fa-smile-o"></i>Chat</a>
<a href="/test"><i class="fa fa-smile-o"></i>Call</a>
<a href="/test"><i class="fa fa-smile-o"></i>Email</a>
</div>
<a href="#" class="liveChatLabel">Contact</a>
</div>

参见JSFiddle：http://jsfiddle.net/8wLze4rf/2/

Answer 1

我编辑了你的小提琴，我想这就是你想要做的。点击后，该类将被添加，并在另一次点击（页面上的任何位置）被删除。

$(".liveChatLabel").click(function(){
    $(".liveChatContainer").addClass("show");
});

$('html').click(function() {
    $(".liveChatContainer.show").removeClass("show");
});

$('.liveChatContainer').click(function(event){
    event.stopPropagation();
});

JSFiddle

Answer 2

添加jQuery库。
使用此脚本：

$(document).ready(function() { $('.liveChatContainer a').click(function() { $('.actions a').removeClass('show'); $(this).addClass('show'); return false; }); });

Answer 3

$(document).click(function(e) {
  $('.liveChatContainer').removeClass('show');
});

$('.liveChatContainer a').click(function(e) {
  $('.liveChatContainer').addClass('show');
  e.stopPropagation();
});
$('.liveChatContainer').click(function(e) {
  e.stopPropagation();
});

.show {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="liveChatContainer online">
  <div class="actions">
    <span class="item title">Need help?</span>

    <a href="#"><i class="fa fa-smile-o"></i>Chat</a>

    <a href="#"><i class="fa fa-smile-o"></i>Call</a>

    <a href="#"><i class="fa fa-smile-o"></i>Email</a>

  </div>
  <a href="#" class="liveChatLabel">Contact</a>

</div>

Answer 4

HTML

<div id="liveChatContainer" class="liveChatContainer online">
    <div class="actions">
        <span class="item title">Need help?</span>
        <a href="/test"><i class="fa fa-smile-o"></i>Chat</a>
        <a href="/test"><i class="fa fa-smile-o"></i>Call</a>
        <a href="/test"><i class="fa fa-smile-o"></i>Email</a>
    </div>
<a id="liveChatLabel" href="#" class="liveChatLabel">Contact</a>
</div>

JS

$(document).ready(function(){ 
    $('#liveChatLabel').click(
        function(){ 
            $('.actions a').removeClass('show'); 
            $('#liveChatContainer').toggleClass('show'); 
            return false;       
        }); 
});

$(document).mouseup(function (e)
{
    var container = $("#liveChatContainer");

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.removeClass('show');
    }
});

JSFiddle

Answer 5

我已经用来切换添加和删除课程，这里有一个小提琴： http://jsfiddle.net/8wLze4rf/8/

$(document).ready(function(){ 
var button = $('.liveChatContainer');

button.on("click",function(){

button.toggleClass('show');
});
});

Answer 6

使用setAttribute（“class”，“actions”）;到java脚本中的链接

Onclick div添加类

6 个答案: