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

Question

I have a link that lieds me to specific <div> on my page. 我有一个链接使我无法进入页面上的特定<div> 。 This is a page content. 这是页面内容。 When i click on link, send me to specific place on my page (title of table). 当我单击链接时，将我发送到页面上的特定位置（表格标题）。 I'd like, that when i click on that link, the <div> (title of table) is colored red. 我想当我单击该链接时， <div> （表格标题）被涂成红色。 Then when i click on another link (another <div> and another title of table) previous <div> is colored back in black and new <div> is colored red...etc. 然后，当我单击另一个链接（另一个<div>和表的另一个标题）时，先前的<div>被涂成黑色，新的<div>被涂成红色...等等。

This is my code so far: 到目前为止，这是我的代码：

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

So when i click on "link to one" page moves me to <div> with id="one" and title "one" must be colored red. 因此，当我单击"link to one"页面时，将我移到id="one" <div>且标题"one"必须涂成红色。 If i click now on "link to three" , page moves me to <div> with id="three" and title "three" must be colored red, title "one" must be colored in default color, so black in this case. 如果我现在单击"link to three" ，则页面将我移到id="three" <div>且标题"three"必须被涂成红色，标题"one"必须被涂成默认颜色，因此在这种情况下为黑色。

I also need a refresh button, when i click on this button, all colors of titles are set to default (black) color. 我还需要一个刷新按钮，当我单击该按钮时，所有标题的颜色都设置为默认（黑色）颜色。

Thanks for or the help 感谢您的帮助

Answer 1

You can just do: 您可以这样做：

div:target {
  color:red;
}

to color divs when clicked with css. 用CSS单击时为div上色。

For reset you could just make a empty link <a href="#"> reset </a> 要进行重置，您可以创建一个空链接<a href="#"> reset </a>

Here is a working example. 这是一个工作示例。

Answer 2

You could add / remove an class (active for example) to the specific div. 您可以向特定的div添加/删除一个类（例如，活动的）。 The example below shows this - you would however need to make some minor changes. 下面的示例显示了这一点-但是，您需要进行一些小的更改。

First Part 第一部分

<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 使用Javascript

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

Css CSS

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

Working fiddle: 工作提琴：

https://jsfiddle.net/y05ub9bk/ https://jsfiddle.net/y05ub9bk/

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

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-04-08 08:31:16

解决方案2
0 2015-04-08 08:35:51

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

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-04-08 08:31:16

解决方案2 0 2015-04-08 08:35:51

解决方案1
1 已采纳 2015-04-08 08:31:16

解决方案2
0 2015-04-08 08:35:51