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

标签 javascript jquery html css colors

我有一个链接骗我到特定的 <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"必须以默认颜色着色,在本例中为黑色。

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

感谢或帮助

最佳答案

你可以这样做:

div:target {
  color:red;
}

用 css 点击时给 div 着色。

对于重置,您可以创建一个空链接 <a href="#"> reset </a>

Here是一个工作示例。

关于javascript - 如何在单击链接时更改 div 的颜色,然后单击其他链接时,另一个 div 更改颜色,上一个设置为默认颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29509366/

相关文章:

javascript - 延迟淡入淡出

javascript - 如何自定义卡片定位 Bootstrap

javascript - 在 JavaScript 中使用 for..of 迭代时从数组中删除元素应该是安全的吗?

javascript - 如何从 promise 中的事件处理程序返回值?

javascript - Rails 应用程序中的 Ajax 按钮不再更新

javascript - 我的 javascript 代码有什么错误?

javascript - 使用 CSS 基于 HTML 时间线的列表样式

javascript - 如何删除谷歌地图中的特定多边形添加事件监听器右键单击

javascript - 谁能解释一下Underscore在_.template中的预编译?

javascript - 如何在组件内添加相同的组件