Javascript 单击并加载文档时添加/删除类
我有两行html 一行包含纯html,另一行包含ul li列表 第一种情况: 在页面加载时,我想根据激活的li更改第一行的文本颜色 第二种情况 在单击第二行中的任何li时,我想根据在第二行中单击的数据更改第一行html的颜色 我的代码 第一排Javascript 单击并加载文档时添加/删除类,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有两行html 一行包含纯html,另一行包含ul li列表 第一种情况: 在页面加载时,我想根据激活的li更改第一行的文本颜色 第二种情况 在单击第二行中的任何li时,我想根据在第二行中单击的数据更改第一行html的颜色 我的代码 第一排 <div class="horizontal-link"> <div class="test"> <h4 data-id="1">Text 1</h4> <!--So on p
<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>
文本1
文本2
第二排
<ul>
<li class="tab active" data-id="1">Text 1</li>
<li class="tab" data-id="2">Text 2</li>
</ul>
文本1
文本2
我已经尝试并创建了一个as演示:
非常感谢您的帮助。提前感谢。您可以像这样使用或检查数据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是否激活了该类
您可以通过添加
active
类来更改div
或h4
的文本颜色
对于div
处于活动状态的类,请在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');
});
});
对于h4
,您需要如下更改CSS
CSS:
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小提琴。我希望这对你有帮助
更新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小提琴:
您的CSS发生了变化:-
您将其编写为.test.active
。应该有差距。这就是为什么在页面加载时没有实现color:red
:
试试这个,代码可以优化
HTML:
JS:
非常棒的简单绝妙的解决方案。非常感谢你们。谢谢布山的帮助。谢谢大家的贡献。我的小提琴呢。我已经更新了你的小提琴。请查看@RajThank Tushar,感谢您的帮助。非常感谢。我已投票支持你的职位。事实上,我发现安东的回答更有效率很高兴@Raj没问题!!
$(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');
});
});
.test .active {
color:red;
}
$(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;
}
});
});
});
<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>
.test.active {
color:red;
}
.tab {
cursor:pointer;
}
ul li.tab {
list-style:none;
display:inline-block;
width:50px
}
.active {
color:red;
}
$(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');
});