javascript - 单击和加载文档时添加/删除类

Question

我有 2 行 html。

一行包含纯 html，另一行包含 ul li 列表。

第一种情况:

在页面加载时，我想根据激活的 li 更改第一行的文本颜色。

第二种情况

单击第二行中的任何 li 时，我想根据我在第二行中单击的数据更改第一行 html 的颜色。

我的代码

第一行

<div class="horizontal-link">
    <div class="test">
         <h4 data-id="1">Text 1</h4> <!--So on page load I would like to change the color to red as related with row 2 ul li) -->

    </div>
    <div class="test">
         <h4 data-id="2">Text 2</h4>

    </div>
</div>

第二行

<ul>
    <li class="tab active" data-id="1">Text 1</li>
    <li class="tab" data-id="2">Text 2</li>
</ul>

我已经尝试并创建了一个 jsfiddle作为演示:

非常感谢任何帮助。提前致谢。

Answer 1

您可以使用 .filter()或 attribute-selectors像这样检查数据 ID

jQuery

$(function(){
    //Adds class on load depending on which is active
    $('.test h4[data-id="'+$('ul li.active').data('id')+'"]').addClass('active');
    //Adds class on click
    $('li.tab').on('click',function(){
        $('.test h4').removeClass('active');
        $that = $(this);
        $('.test h4').filter(function(){
            return $(this).data('id')==$that.data('id')
        }).addClass('active');
    //removes class on clickable li and adds to clicked
    $(this).addClass('active').siblings().removeClass('active');
    });
});

CSS

.test h4.active {
    color:red;
}

您需要更改 css，以便它检查 h4 类是否处于事件状态

DEMO