求助：点击Tab导航栏时无法修改内部文本颜色的问题

问题核心是你之前的代码操作的是<a>标签的颜色，但内部的<p class="name_tab">有独立的样式优先级，所以<a>的颜色设置无法覆盖它。而且绑定<p>的点击事件需要直接点文本才触发，不符合点击整个tab就生效的需求。

直接修改<a>的点击事件，操作其内部的<p>元素即可：

$("a.tab").click(function() {
    // 重置所有tab的背景色
    $("a.tab").css("background-color", "#1F1F1F");
    // 设置当前点击tab的背景色
    $(this).css("background-color", "#404040");

    // 重置所有tab内文本的颜色
    $("p.name_tab").css("color", "#939393");
    // 设置当前点击tab内文本的颜色
    $(this).find("p.name_tab").css("color", "white");
});

关键改动是把$(this).css("color", "white")换成$(this).find("p.name_tab").css("color", "white")，这样就直接操作了当前<a>标签内部的<p>元素，不用额外绑定<p>的点击事件，点击整个tab就能同步修改文本颜色。

另外更推荐的做法是用CSS类来控制样式，避免直接操作行内样式，更容易维护：

/* 普通状态 */
a.tab {
    background-color: #1F1F1F;
}
a.tab p.name_tab {
    color: #939393;
}
/* 激活状态 */
a.tab.active {
    background-color: #404040;
}
a.tab.active p.name_tab {
    color: white;
}

对应的jQuery代码改成：

$("a.tab").click(function() {
    // 移除所有tab的active类
    $("a.tab").removeClass("active");
    // 给当前点击的tab添加active类
    $(this).addClass("active");
});

这种方式把样式和逻辑分离，后续修改样式直接改CSS就行，不用动JS代码。

内容的提问来源于stack exchange，提问作者user15505180