Question

我正在尝试使用css和表格设置菜单：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>MONITORING</title>

<style type="text/css">
.menutext {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 14px;
}
.headtext {
    font::"Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 36px;
    color: #003299;
}
table.menu {
    border: thin solid #000;
    background-color: #003299;
    text-align:center;
    font:"Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size:14px;
    color:#FFF;
}
table.menu td:hover {
    background-color:#FFF;
    text-align:center;
    font:"Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size:14px;
    color:#003299;
}


</style>
</head>

<body>
<table width="100%" border="0" align="center">
  <tr>
    <td width="30%" height="147"><img src="images/logo.png" width="300" height="128" align="left"></td>
    <td width="70%" align="center" valign="middle" class="headtext">MONITORING</td>
  </tr>
</table>
<br>


<table class="menu" width="100%" height="22" align="center" id="menu">
  <tr>
    <td width="25%">MON1</td>
    <td width="25%">MON2</td>
    <td width="25%">MON3</td>
    <td width="25%">MON4</td>
  </tr>
</table>
<p>&nbsp;</p>
</body>
</html>

我已经能够设置td：hover但是我希望能够在点击td时保持悬停设置。另外，如果你能告诉我如何实现这一目标，如果我点击mon2，mon2会将css更改为table.menu td：hover（或使用相同属性创建的新的），我将不胜感激。 mon1将返回到原始的css，即table.menu。

Answer 1

在你的TD中添加这个

class="menu-item" onclick="selectMenu($(this))"

然后使用这个javascript代码，你必须包含所有jquery.min.js的拳头

function selectMenu(e){
        $('.menu-item').removeClass('clicked');
        e.addClass('clicked');
}

添加此css

.clicked{
        background-color: #FFF;
        text-align: center;
        font: "Palatino Linotype", "Book Antiqua", Palatino, Serif;
        font-size: 14px;
        color: #003299;
 }

Answer 2

您不必包含jquery。

按原样放置HTML代码。

在'＆lt; \ table＆gt;'之后添加此javascript代码

</table>
<script>
    [].forEach.call(document.querySelectorAll('.menu td'), function(el){
        el.addEventListener('click', function(){
            el.classList.toggle('clicked');
        }, false);
    });
</script>

在你的css代码'table.menu td：hover'之后添加点击的课程

table.menu td:hover, .clicked {
    background-color:#FFF;
    text-align:center;
    font:"Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size:14px;
    color:#003299;
}

Answer 3

你没有打扰，好好利用这个CSS .linkClicked { color: blue /*or whatever/* } .linkNormal { color: gray }

然后在A

中添加

class="linkNomal" href="javascript:void(0)" data-href="add here instead your link" onclick="chargeLink($(this))"

然后最后使用这个功能

function chargeLink(e) {
      $('.linkNormal').removeClass('linkClicked'); 
      e.addClass('linkClicked'); 
      $('.yourframeclass').attr('src', e.attr('data-href'));
}

如何在点击表格时更改css样式

3 个答案: