Question

我的链接让我对我页面上的特定<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"必须为默认颜色，在这种情况下如此黑。

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

感谢您的帮助

Answer 1

你可以这样做：

div:target {
  color:red;
}

使用css点击颜色div。

要重置，您只需制作一个空链接<a href="#"> reset </a>

Here是一个有效的例子。

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

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

2 个答案: