how can i change the css style on click with table


Tags: javascript,jquery,html,css,html-table

Problem :

I'm trying to set up menu using the css and a table:

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

I've been able to set up td:hover but I would like to be able to keep the hover setting when I have clicked on td. Additionally I would be grateful if you could let me know how to achieve that if mon1 has been chosen if i click mon2 the mon2 will change the css to a table.menu td:hover (or a new one created with the same properties) and mon1 will go back to the original css which is table.menu.



Solution :

Well add this inside your TDs

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

Then use this javascript code, you must include fist of all jquery.min.js

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

Add this css too

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

    CSS Howto..

    How do I get this HTML canvas animation to appear on top of my image?

    How to tell the code to choose between two variables and make them equal?

    Showing the child category when Clicking the parent category

    How to fill the anchor element's height to 100% in html?

    How to capitalize first letter with JSTL/CSS?

    CSS: How can I stop the horizontal navigation links from shiningthrough the floating cart when it's accordioned down?

    How to hide navbar when when overlay appears

    How to truncate paragragh lines in css [duplicate]

    How to apply CSS to elements that have multiple classes?

    How do I make the Android WebView not ignore the 'height' css property?

    How to show indicator of loading?

    How to exclude a CSS formatting? [duplicate]

    How can I skin / theme a windows forms application [closed]

    How to scale the image with css

    Global CSS - how to implement multiple frameworks

    Should be Simple: How to preserve data on a page of basic javascript/css/html when going to another page

    How can I push the first row of images down?

    how to get background image present in other folder using css?

    How do I display an image over a table cell that's larger than the cell?

    How to make google maps fit the mobile device screen

    How to get a tight div when heights differ? [duplicate]

    how can i change value of transform with jQuery?

    How do you close the CSS preview view in Eclipse?

    How to display only the
      that has a selected
    • in it, including all of the
    • s in that parent ul, not just the selected ones?

    How to make bootstrap 3 navbar not wrap

    How do I keep multiple DIVs the same height using jQuery?

    How Can I remove the injected CSS Resource in GWT?

    How can I use webpack to copy files to the distribution folder?

    How to get content of particular column of html page after split using css-rule(-webkit-column-width:)

    How to justify 4 divs in one row [duplicate]