Question

我有两行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

Answer 2

您可以通过添加div课程来更改h4或active的文字颜色。

对于div active类使用jQuery

以下

$(document).ready(function ($) {

    var id = $('ul').find('.active').attr('data-id');
    $('.horizontal-link h4[data-id="'+id+'"]').closest('.test').addClass('active');


    $("li.tab").click(function () {
        $('.active').removeClass('active');
        var id = $(this).attr('data-id');

        $('.horizontal-link h4[data-id="'+id+'"]').closest('.test').addClass('active');

     });
});

<强> DEMO

对于h4，您需要更改CSS，如下所示

CSS：

.test h4.active {
    color:red;
}

jQuery：

$(document).ready(function ($) {

    var id = $('ul').find('.active').attr('data-id');
    $('.horizontal-link h4[data-id="'+id+'"]').addClass('active');


    $("li.tab").click(function () {
        $('.horizontal-link h4').removeClass('active');
        var id = $(this).attr('data-id');

        $('.horizontal-link h4[data-id="'+id+'"]').addClass('active');

     });
});

<强> DEMO

Answer 3

在这里看看JS小提琴。我希望这会对你有帮助。

更新了jQuery：

   $(document).ready(function ($) {

        var id = $('ul').find('.active').attr('data-id');

        $('.horizontal-link h4[data-id='+id+']').addClass('active');

        $("li.tab").click(function () {
            $('.horizontal-link h4').removeClass('active');
            var id = $(this).attr('data-id');
            $('.horizontal-link h4[data-id='+id+']').addClass('active');
        });
    });

JS小提琴： http://jsfiddle.net/v1v1tqzs/34/

Answer 4

您的 CSS 发生了变化： -

.test .active {
    color:red;
 }

你把它写成.test.active。应该有间隙。这就是页面加载的原因color:red没有实现。

YOUR UPDATED FIDDLE

$(document).ready(function () {

var id = $('ul').find('.active').attr('data-id');

$('.horizontal-link h4').each(function () {
    if ($(this).attr('data-id') == id) {
        $(this).addClass('active');
        return;
    }
});

$("li.tab").click(function () {
    var id = $(this).attr('data-id');
    $('.horizontal-link h4').each(function () {
        if ($(this).hasClass('active')) {
            $(this).removeClass('active');
        }
    });
    $('.horizontal-link h4').each(function () {
        if ($(this).attr('data-id') == id) {
            $(this).addClass('active');
            return;
        }
    });
  });
});

Answer 5

试试这个，可以优化代码

HTML：

<div class="horizontal-link">
    <div class="test">
         <h4 class = "1" data-id="1">Text 1</h4>

    </div>
    <div class="test">
         <h4 class = "2" 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>

CSS：

.test.active {
    color:red;
}
.tab {
    cursor:pointer;
}
ul li.tab {
    list-style:none;
    display:inline-block;
    width:50px
}
.active {
    color:red;
}

JS：

$(document).ready(function () {

    var id = $('ul').find('.active').attr('data-id');

    if ($('.horizontal-link h4').attr('data-id') == id) {
        $('.'+id).addClass('active');
    }

});

$(".tab").click(function () {
    $(".tab").removeClass('active');
    $(this).addClass('active');
    $('.horizontal-link h4').removeClass('active');
    var id = $(this).attr('data-id');
    $('.'+id).addClass('active');

});

在点击和文档加载时添加/删除类

5 个答案: