如何在单击链接时更改 div 的颜色，然后单击其他链接时，另一个 div 更改颜色，上一个设置为默认颜色答案

【问题标题】：How to change color of div on link click and then when other link is clicked, another div changes color, previous is set to default color如何在单击链接时更改 div 的颜色，然后单击其他链接时，另一个 div 更改颜色，上一个设置为默认颜色
【发布时间】：2015-04-08 08:16:27
【问题描述】：

我有一个链接可以欺骗我页面上的特定<div>。这是一个页面内容。当我单击链接时，将我发送到我页面上的特定位置（表格标题）。我想，当我点击那个链接时，<div>（表格标题）是红色的。然后，当我点击另一个链接（另一个<div> 和另一个表格标题）时，以前的<div> 被染回黑色，新的<div> 被染成红色......等等。

这是我目前的代码：

<html>
<body>
<table>
<tr>
<button onclick="SetAllTitleColorToBlack()">Refresh page</button>
    <td>
        <div id="kazalo" height="50" style="padding-left:25; font-size:16px"> <b><u>Page content:</u></b>
            <b><ul>
                <li> <a href="#one"> link to one </a></li>
                <li> <a href="#two"> link to two </a></li>
                <li> <a href="#three"> link to three </a></li>
                <li> <a href="#four"> link to four </a></li>
                <li> <a href="#five"> link to five </a></li>

            </ul></b>
        </div>
    </td>
        <script> <!-- script, da kazalo strani sledi strani, če gremo dol, gre tudi kazalo dol -->
                $(window).scroll(function () {
                $('#kazalo').stop().animate({
                    'marginTop': $(window).scrollTop() + 'px',
                    'marginLeft': $(window).scrollLeft() + 'px'
                }, 'slow');
            });
            var totaltext = '';
            for (var i = 0; i < 100; i++) {
                if (window.CP.shouldStopExecution(1)) {
                    break;
                }
                totaltext += 'scroll!<br />';
            }
            window.CP.exitedLoop(1);
            $('#div2').html(totaltext);
        </script>
    <td style="padding-left:50">        
        <div id="one"> one </div>
        <div id="two"> two </div>
        <div id="three"> three </div>
        <div id="four"> four </div>
        <div id="five"> five </div>
    </td>
</tr>
</table>
</body>
</html>

所以当我点击"link to one" 页面时，我会移动到<div>，id="one" 和标题"one" 必须是红色的。如果我现在点击"link to three"，页面会将我移动到<div>，id="three" 和标题"three" 必须为红色，标题"one" 必须为默认颜色，在这种情况下为黑色。

我还需要一个刷新按钮，当我点击这个按钮时，标题的所有颜色都设置为默认（黑色）颜色。

感谢或帮助

【问题讨论】：

嘿@Klemen - 当您在 Stack 上提问时，请记住将您的示例代码隔离到 Fiddle 中。通过这种方式调试代码要容易得多，而且您会得到更快的响应。
代码中的“CP”是什么？可以提供吗？

标签： javascript jquery html css colors

【解决方案1】：

你可以这样做：

div:target {
  color:red;
}

使用 css 点击时为 div 着色。

对于重置，您只需创建一个空链接<a href="#"> reset </a>

Here 是一个工作示例。

【讨论】：

【解决方案2】：

您可以向特定的 div 添加/删除一个类（例如活动）。下面的示例显示了这一点 - 但是您需要进行一些小的更改。

第一部分

<li> <a class="navLink" href="#one"> link to one </a></li>

<td id="myContent" style="padding-left:50">        
    <div id="one"> one </div>
    <div id="two"> two </div>
    <div id="three"> three </div>
    <div id="four"> four </div>
    <div id="five"> five </div>
</td>

Javascript

<script>
    $('.navLink').click(function() {
        $(".active").removeClass("active");
        $($(this).attr('href')).addClass("active");
    });
</script>

CSS

<style>
    .active { background-color: rgba(0,0,0,0.5); }
</style>

工作小提琴：

https://jsfiddle.net/y05ub9bk/

【讨论】：