单击按钮时使用 jQuery 更改 CSS 定义

Question

在下图中，您可以看到有 2 个选项卡：

• 所有任务活动选项卡
• 评论标签

当点击所有任务活动选项卡时，我需要将CSS类“.Activity-comment”的CSS定义更改为“display:block;”

当点击Comments标签时，我需要将CSS类“.Activity-non-comment”的CSS定义更改为“display: none;”

所以目标很简单，两个选项卡实际上将显示相同 Div/Data 的 HTML DOM 节点。我将根据点击的标签显示/隐藏记录。

简单的jQuery点击事件...

$('#task-modal-activity-comment-btn').click(function(e) {

    //  make CSS defintion for CSS class `.Activity-non-comment` 
    // = display: none;

    e.preventDefault();
});


$('#task-modal-activity-btn').click(function(e) {

    //  make CSS definition for CSS class `.Activity-non-comment` 
    // = display: block;

    e.preventDefault();
});

---

根据我上面的 2 个 jQuery 点击事件，如何更改上述 CSS 类的 CSS 定义？

Answer 1

您确定要更改定义吗？通常，此类任务通过添加/删除更改行为的其他类来解决

$('#task-modal-activity-comment-btn').click(function(e) {

    //  make CSS defintion for CSS class `.Activity-non-comment` 
    // = display: none;

    $('.Activity-comment').removeClass('hidden');
    e.preventDefault();
});


$('#task-modal-activity-btn').click(function(e) {

    //  make CSS definition for CSS class `.Activity-non-comment` 
    // = display: block;
    $('.Activity-comment').addClass('hidden');
    e.preventDefault();
});

“隐藏”在哪里

.hidden { display: none; }

Answer 2

你可以试试这个。

$('#task-modal-activity-comment-btn').click(function(e) {

//  make CSS defintion for CSS class `.Activity-non-comment` 
// = display: none;
$('.Activity-non-comment').css('display','none');
e.preventDefault();
});


$('#task-modal-activity-btn').click(function(e) {

//  make CSS definition for CSS class `.Activity-non-comment` 
// = display: block;
$('.Activity-non-comment').css('display','block');
e.preventDefault();
});

在 dom 准备好时给你需要默认显示的类一个显示块。 有关 jquery css 选择器的更多信息，请参阅给定的链接 Jquery CSS selectors

Answer 3

请尝试以下代码

$('#task-modal-activity-comment-btn').click(function(e) {

    //  make CSS defintion for CSS class `.Activity-non-comment` 
    // = display: none;
$('.Activity-non-comment').css('display','none');

    e.preventDefault();
});


$('#task-modal-activity-btn').click(function(e) {

    //  make CSS definition for CSS class `.Activity-non-comment` 
    // = display: block;
$('.Activity-non-comment').css('display','block');

    e.preventDefault();
});