how to toggle image in HTML-CSS?

Question

I am trying to toggle image, i searched the net but could not find appropriate solution for my scene. I have three buttons on right side tabbed menu. By default it loads first DIV then when i click on second button it loads second div similar for third. Now i the button has an image in background. I want to show which div is active by toggling the image

Now see this image this is my menu the first one is active this is a li tag and i have set the background to that li now when i click on second tab i want to change the image in three tabs as : the first will be with line and the one active without line..

Maybe its too confusing :(

here's the code::

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
</head>

<body>
    <div id="tabs">
        <ul style="float:right">
            <li>
                <a href="#a" class="clickable"></a>
            </li>
            <li>
                <a href="#b" class="bizrtc"></a>
            </li>
            <li>
                <a href="#c" class="lab"></a>
            </li>
        </ul>
        <div id="a">
            <object type="text/html" data="home.html" width="1280px" height="720px" style="overflow:auto;"> </object>
        </div>
        <div id="b">
            <object type="text/html" data="contact.html" width="1280px" height="720px" style="overflow:auto;"></object>
        </div>
        <div id="c">
            <object type="text/html" data="blog.html" width="1280px" height="720px" style="overflow:auto;"></object>
        </div>
    </div>
    <script>
        $("#siteloader").html('<object data="home.html">');
    </script>
    <style type="text/css">
    .ui-tabs.ui-tabs-vertical {
            padding: 0;
            width: 104%;
        }

        .ui-tabs.ui-tabs-vertical .ui-widget-header {
            border: none;
        }

        .ui-tabs.ui-tabs-vertical .ui-tabs-nav {
            float: left;
            width: 4em;
            border-radius: 4px 0 0 4px;
        }

        .ui-tabs.ui-tabs-vertical .ui-tabs-nav li {
            clear: left;
            width: 100%;
            margin: -52px 0px;
            height: 230px;
            border-width: 1px 0 1px 1px;
            border-radius: 4px 0 0 4px;
            overflow: hidden;
            position: relative;
            right: 38px;
            z-index: 2;
        }

        .ui-tabs.ui-tabs-vertical .ui-tabs-nav li a {
            display: block;
            width: 100%;
            padding: 0.6em 1em;
            height: inherit;
        }

        .ui-tabs.ui-tabs-vertical .ui-tabs-nav li a:hover {
            cursor: pointer;
        }

        .ui-tabs.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
            margin-bottom: -52px;
            padding-bottom: 0;
            border-right: 1px solid white;
            height: 230px;
        }

        .ui-tabs.ui-tabs-vertical .ui-tabs-nav li:last-child {
            margin-top: -52px;
        }

        .ui-tabs.ui-tabs-vertical .ui-tabs-panel {
            float: left;
            width: 28em;
            border-left: 1px solid gray;
            border-radius: 0;
            position: relative;
            left: -1px;
        }

        .clickable {
            background: url(buttons/umobility_button_active.png) no-repeat 6px center;
        }

        .bizrtc {
            background: url(buttons/labs_button.png) no-repeat 6px center;
        }

        .lab {
            background: url(buttons/rtcbiz_button.png) no-repeat 6px center;
        }
    }
    </style>
</body>
<script type="text/javascript">
    $('#tabs').tabs().addClass('ui-tabs-vertical ui-helper-clearfix');
</script>

</html>

You could just add a class called 'active' when they're clicked, and then create a new CSS rule with a different background image when that active class is included — Lee, Oct 13 '15 at 08:15
... yes. You just create a new CSS rule that includes the active class, and use a different image. — Lee, Oct 13 '15 at 08:17
what should be my css rule? i dont know much about them i just went thorough a tutorial and have done this — Rajan, Oct 13 '15 at 08:18
jQuery UI Tabs already takes care of handling a class 'ui-tabs-active' whenever clicked on a particular tab. You will just need to write the CSS for active scenario. See the answer by @J.D. Thralls below, its perfect. — n4m31ess_c0d3r, Oct 13 '15 at 08:34

score 2 · Accepted Answer · answered Oct 13 '15 at 08:20

2

Your CSS rules to include another state would look like this:

.clickable.active {
   background: url(buttons/umobility_button_active.png) no-repeat 6px center;
}

.bizrtc.active {
  background: url(buttons/labs_button_active.png) no-repeat 6px center;  
}

.lab.active {
  background: url(buttons/rtcbiz_button_active.png) no-repeat 6px center;  
}

You'll need to use a jquery onClick call to the tabs though.

$("#tabs li a").click(function() {
    $(this).addClass('active');
});

answered Oct 13 '15 at 08:20

Lee

4,187
6
25
71

this works but i want to show only one as active. so now what happens is intially only first is active then when i click both first and second becomes active and when i click on third all thre become active so at a time only one should be active – Rajan Oct 13 '15 at 08:27
try this $("#tabs li a").click(function() { $("#tabs li a").removeClass('active'); $(this).addClass('active'); }); – Prabhu Suriya Oct 13 '15 at 08:38
@PrabhuSuriya this works but not for the first tab it always remains active – Rajan Oct 13 '15 at 09:43

J.D. Thralls · Answer 2 · 2015-10-13T08:33:43.283

Please read through the css in the code already. Just add to your existing block

.ui-tabs.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
  margin-bottom: -52px;
  padding-bottom: 0;
  border-right: 1px solid white;
  height: 230px;
}

another rule like

background-image:url( path-to-file );

In a block like

li.ui-tabs-active.a { new rule for class a }
li.ui-tabs-active.b { new rule for class b }
li.ui-tabs-active.c { new rule for class c }

The toggle function comes from jquery ui so there is nothing else to do.

how to toggle image in HTML-CSS?

2 Answers2