Question

我有多个页面都使用顶部的简单标签菜单。菜单（又名列表）存储在单独的html文件中：

<ul>
  <li id="Tab1"><a href='../Page1.html'> Page1 </a></li>
  <li id="Tab2"><a href='../Page2.html'> Page2 </a></li>
  <li id="Tab3"><a href='../Page3.html'> Page3 </a></li>

每个页面都有<div id='tabs'> </div>和

$('#tabs').load('CommonTabs.html');

一切正常，我的标签加载到'标签'div。现在我想在每个页面上将一个div的类设置为“active”，以便可以应用css中定义的正确样式。我试过了：

$('#tabs').load('CommonTabs.html');
$('#Tab1'.addClass("active");

但这似乎不起作用。当我在浏览器中执行“检查元素”时，li没有分配“活动”类。

Answer 1

load函数是异步的，因此第二次调用执行时不会加载数据。而是在回调函数中执行它：

$('#tabs').load('CommonTabs.html', function () {
    $('#Tab1').addClass("active");
});

Answer 2

您遇到语法错误。尝试： $('#Tab1').addClass("active");

Answer 3

我将举例说明如何在按钮点击时将类设置为特定元素。当然，您需要创建一个带有类addClassButtonTab3的按钮才能工作。

$('.addClassButtonTab3').click('on', function() {
    $('#tab3').addClass('active');
});

我们将事件处理程序绑定到具有类“addClassButtonTab3”的按钮，当单击它时，我们将向具有ID tab3的元素添加一个类。

jQuery addClass列表项

3 个答案: