Change Css Class of li in ul onclick - Menu Linked Pages


Below code is posted on this blog on demand. This topic is modification of the topic
Change Css Class of li in ul onclick
Previous code sample is single page code. Now I have three different pages that are linked to three menu items. When Page One is clicked then menu Page One is highlighted and menupageone.html is navigated, when Page Two is clicked then menu Page Two is highlighted and menupagetwo.html and soon.

menupageone.html – code , copy paste the below code and save with name menupageone.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>List Item Menu - Query String</title>
    <style type="text/css">
        *
        {
            font-family: Calibri;
            font-size: 14px;
        }
        ul
        {
            list-style-type: none;
            float: left;
            border-bottom: solid 2px Red;
            padding-right: 40px;
        }
        ul li
        {
            float: left;
            width: auto;
            cursor: pointer;
        }
        ul li a
        {
            text-decoration: none;
            color: #000000;
            padding: 8px;
            display: block;
        }
    </style>
    <script type="text/javascript" language="javascript">

        function checklist()
        {
            var list = document.getElementById("menu").getElementsByTagName('li');
            for (var i = 0; i < list.length; i++)
            {
                list[i].style.background = '#ffffff';
            }
        }

        window.onload = function ()
        {
            checklist();
            document.getElementById("one").style.background = '#ff0000';
        };

    </script>
</head>
<body>
    <ul id="menu">
        <li id="one"><a href="menupageone.html">Page One</a></li>
        <li id="two"><a href="menupagetwo.html">Page Two</a></li>
        <li id="three"><a href="menupagethree.html">Page Three</a></li>
    </ul>
    <div style="clear: both">
    </div>
    <br />
    <br />
</body>
</html>



menupagetwo.html – code , copy paste the below code and save with name menupagetwo.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>List Item Menu - Query String</title>
    <style type="text/css">
        *
        {
            font-family: Calibri;
            font-size: 14px;
        }       
        ul
        {
            list-style-type: none;
            float: left;
            border-bottom: solid 2px Red;
            padding-right: 40px;
        }
        ul li
        {
            float: left;
            width: auto;
            cursor: pointer;
        }
        ul li a
        {
            text-decoration: none;
            color: #000000;
            padding: 8px;
            display: block;
        }
    </style>
    <script type="text/javascript" language="javascript">

        function checklist()
        {
            var list = document.getElementById("menu").getElementsByTagName('li');
            for (var i = 0; i < list.length; i++)
            {
                list[i].style.background = '#ffffff';
            }
        }

        window.onload = function ()
        {
            checklist();
            document.getElementById("two").style.background = '#ff0000';
        };

    </script>
</head>
<body>
    <ul id="menu">
        <li id="one"><a href="menupageone.html">Page One</a></li>
        <li id="two"><a href="menupagetwo.html">Page Two</a></li>
        <li id="three"><a href="menupagethree.html">Page Three</a></li>
    </ul>
    <div style="clear: both">
    </div>
    <br />
    <br />
</body>
</html>

menupagethree.html – code , copy paste the below code and save with name menupagethree.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>List Item Menu - Query String</title>
    <style type="text/css">
        *
        {
            font-family: Calibri;
            font-size: 14px;
        }
        ul
        {
            list-style-type: none;
            float: left;
            border-bottom: solid 2px Red;
            padding-right: 40px;
        }
        ul li
        {
            float: left;
            width: auto;
            cursor: pointer;
        }
        ul li a
        {
            text-decoration: none;
            color: #000000;
            padding: 8px;
            display: block;
        }
    </style>
    <script type="text/javascript" language="javascript">

        function checklist()
        {
            var list = document.getElementById("menu").getElementsByTagName('li');
            for (var i = 0; i < list.length; i++)
            {
                list[i].style.background = '#ffffff';
            }
        }

        window.onload = function ()
        {
            checklist();
            document.getElementById("three").style.background = '#ff0000';
        };

    </script>
</head>
<body>
    <ul id="menu">
        <li id="one"><a href="menupageone.html">Page One</a></li>
        <li id="two"><a href="menupagetwo.html">Page Two</a></li>
        <li id="three"><a href="menupagethree.html">Page Three</a></li>
    </ul>
    <div style="clear: both">
    </div>
    <br />
    <br />
</body>
</html>

Code for all pages is same, only change is in the script
window.onload = function ()
        {
            checklist();
            document.getElementById("three").style.background = '#ff0000';
        };


Comments

Post a Comment

Popular posts from this blog

Change Css Class of li in ul onclick

Image
Below is the simple and a short code to change or set the background color of item in menu onclick or active tab of menu (i.e. li of ul) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>List Item</title> <style type="text/css"> ul {     list-style-type:none;     float:left;     border-bottom: solid 2px Red;     padding-right:40px; } ul li {     float:left;     width:auto;     padding:8px;     display:block;     cursor:pointer; } </style> <script type="text/javascript" language="javascript">     function checklist(ctrl)     {   ...
Read more

Find missing sequence number. Get the numbers where sequence is missing.

Most of the time the question was asked while having Database interview that we have number sequence present in a table but some numbers are missing. Can you write the query to detect where number is missing from sequence and if possible then also can get the missing number? OK, it’s not a rocket science so let’s begin. Please give me a paper and a pen to write query Sir. I am using a Temporary variable table here. DECLARE @Temp TABLE (        Id INT IDENTITY ( 1 , 1 ),        Num INT ) INSERT INTO @Temp ( Num ) VALUES ( 1 ) ,( 2 ), ( 4 ), ( 6 ), ( 7 ), ( 9 ) SELECT * FROM @Temp SELECT a . Id , a . Num , b . Num , ( a . Num - b . Num ) as Diff , ( b . Num + 1 ) as MissingNum FROM @Temp a LEFT JOIN @Temp b ON b . Id = ( a . Id - 1 ) WHERE ( a . Num - b . Num ) > 1 You see it’s just a simple SELECT statement but tricky. OK, yes it will produce m...
Read more

Get Query String Values With Javascript

Image
JavaScript Code To  Retrieve Query String Values This topic shows you how you can retrieve the query string values from a URL using JavaScript. The code is simple and understandable. Below is the complete code. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Query String using Javascript</title> <script type="text/javascript" language="javascript">     function getquerystring()     {         var qsarr = new Array();                  var qs = location.search.substring(1);         var singleqs = new Array();         var str ="";         qsarr = qs.split('&');    ...
Read more