如何更改活动链接样式[关闭]答案

【问题标题】：How to change active link styling [closed]如何更改活动链接样式[关闭]
【发布时间】：2014-05-09 20:10:07
【问题描述】：

我正在尝试创建一个简单的选项卡区域，其中内容会根据单击的选项卡而变化。 Javascript 是一个非常基本的函数，它可以在单击时将链接类更改为活动状态。我希望活动标签具有不同的颜色，但我无法让它在第一次点击后改变。

我已经环顾四周，似乎无法弄清楚为什么它不起作用

CSS：

/* hide inactive tabs */
#content_2, #content_3, #content_4, #content_5 {
 display: none;
}

/* list styling */
ul.tabs li {
 list-style: none;
 display: inline-block;
}

/* inactive links */
ul.tabs li a {
 background-color: black;
 display: inline-block;
}

/* active links */
ul.tabs li a.active {
 background-color: pink;
 display: inline-block;
}

HTML：

<div class="all-interact">
<h1>Title</h1>

<div class="inner-interact">

    <ul class="tabs">
       <li><a href="javascript:tabSwitch('tab_1', 'content_1');" id="tab_1" class="active">tab 1</a></li>
       <li><a href="javascript:tabSwitch('tab_2', 'content_2');" id="tab_2">tab 2</a></li>
       <li><a href="javascript:tabSwitch('tab_3', 'content_3');" id="tab_2">tab 3</a></li>
       <li><a href="javascript:tabSwitch('tab_4', 'content_4');" id="tab_2">tab 4</a></li>
       <li><a href="javascript:tabSwitch('tab_5', 'content_5');" id="tab_2">tab 5</a></li>
    </ul>


        <div class="tab-content" id="content_1">
            <p>tab 1 content</p>
        </div>

        <div class="tab-content" id="content_2">
            <p>tab 2 content</p>
        </div>

        <div class="tab-content" id="content_3">
            <p>tab 3 content</p>
        </div>

        <div class="tab-content" id="content_4">
            <p>tab 4 content</p>
        </div><!--content4-->

        <div class="tab-content" id="content_5">
            <p>tab 5 content</p>
        </div><!--content5-->

    </div>
</div>

Javascript：

function tabSwitch(new_tab, new_content) {

document.getElementById('content_1').style.display = 'none';
document.getElementById('content_2').style.display = 'none';
document.getElementById('content_3').style.display = 'none';
document.getElementById('content_4').style.display = 'none';
document.getElementById('content_5').style.display = 'none';
document.getElementById(new_content).style.display = 'block';

document.getElementById('tab_1').className = '';
document.getElementById('tab_2').className = '';
document.getElementById('tab_3').className = '';
document.getElementById('tab_4').className = '';
document.getElementById('tab_5').className = '';
document.getElementById(new_tab).className = 'active';

}

【问题讨论】：

标签： javascript html css class tabs

【解决方案1】：

除了第一个之外，所有的 id 都是tab_2：

<ul class="tabs">
   <li><a href="javascript:tabSwitch('tab_1', 'content_1');" id="tab_1" class="active">tab 1</a></li>
   <li><a href="javascript:tabSwitch('tab_2', 'content_2');" id="tab_2">tab 2</a></li>
   <li><a href="javascript:tabSwitch('tab_3', 'content_3');" id="tab_2">tab 3</a></li>
   <li><a href="javascript:tabSwitch('tab_4', 'content_4');" id="tab_2">tab 4</a></li>
   <li><a href="javascript:tabSwitch('tab_5', 'content_5');" id="tab_2">tab 5</a></li>
</ul>

改为：

<ul class="tabs">
   <li><a href="javascript:tabSwitch('tab_1', 'content_1');" id="tab_1" class="active">tab 1</a></li>
   <li><a href="javascript:tabSwitch('tab_2', 'content_2');" id="tab_2">tab 2</a></li>
   <li><a href="javascript:tabSwitch('tab_3', 'content_3');" id="tab_3">tab 3</a></li>
   <li><a href="javascript:tabSwitch('tab_4', 'content_4');" id="tab_4">tab 4</a></li>
   <li><a href="javascript:tabSwitch('tab_5', 'content_5');" id="tab_5">tab 5</a></li>
</ul>

JSFiddle

【讨论】：

【解决方案2】：

您的所有标签都有相同的 id。见固定：

 <ul class="tabs">
   <li><a href="javascript:tabSwitch('tab_1', 'content_1');" id="tab_1" class="active">tab 1</a></li>
   <li><a href="javascript:tabSwitch('tab_2', 'content_2');" id="tab_2">tab 2</a></li>
   <li><a href="javascript:tabSwitch('tab_3', 'content_3');" id="tab_3">tab 3</a></li>
   <li><a href="javascript:tabSwitch('tab_4', 'content_4');" id="tab_4">tab 4</a></li>
   <li><a href="javascript:tabSwitch('tab_5', 'content_5');" id="tab_5">tab 5</a></li>
</ul>

see fix here

【讨论】：

使用开发人员工具“F12”查看浏览器 javascript 错误然后在控制台中查看错误是一种很好的做法

【解决方案3】：

对于 4/5 锚标记，您具有相同的 ID #tab_2。我一直在做这样的傻事。 :)

您始终可以做的一件事是通过带有预构建模板的 HTML 验证器运行您的标记，并填写所有有效的垃圾，以便几乎立即找到这些。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
   <HEAD>
      <TITLE>My first HTML document</TITLE>
   </HEAD>
   <BODY>
      <P>Hello world!
   </BODY>
</HTML>

【讨论】：