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

Question

我的页面上有一个 link 骗我说 <div>。这是一个页面内容。当我单击 link 时，将我转到我页面上的特定位置（table 的标题）。我希望，当我单击 link 时，<div>（table 的标题）显示为红色。然后，当我单击另一个 link（另一个 <div> 和 table 的另一个标题）时，之前的 <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" 必须为默认颜色, 在这种情况下很黑。

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

感谢或帮助

Answer 1

你可以这样做：

div:target {
  color:red;
}

点击 css 时为 div 着色。

对于重置，你可以做一个空的 link <a href="#"> reset </a>

Here 是一个工作示例。

Answer 2

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

第一部分

<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>

工作fiddle：

https://jsfiddle.net/y05ub9bk/

如何在单击 link 时更改 div 的颜色，然后单击其他 link 时，另一个 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

html

javascript

css

jquery

colors