Link to home
Start Free TrialLog in
Avatar of zachvaldez
zachvaldezFlag for United States of America

asked on

keep selected list color

I have up and Li in my navigation.when I hover to the list,it changed color to transparent and opens a web page. I'd like to keep the selected list color unchanged when the page opens until another list item is selected.
Avatar of Navneet Hegde
Navneet Hegde
Flag of United States of America image

Hi!

On Click set the CSS class for that selected item.

Thanks!
Avatar of zachvaldez

ASKER

Please show the step to do it . thanks.
Do you have some example code?
I think you can easily spot what I need to adjust here... thanks


div#Navigation{
      width:200px;
}
div#Navigation ul{
      list-style:none;
      margin:8px 0;
      padding:0;
}
div#Navigation ul li{
      display:block;
      border-style:hidden;
      background-color: transparent;
      padding-right: 8px;
    text-align: left
}
div#Navigation ul li:hover{
      display:block;
      border-style:none;
      background-color: #fff;
      padding-right: 8px;
    text-align: right
}

div#Navigation ul li a{
      color:#333333;
      text-decoration:none;
      display:block;
}
div#Navigation ul li a:visited{
      color:#333333;
      text-decoration:none
}
div#Navigation ul li a:hover{
      color:#000000;
      background:#FFFFFF;
      text-decoration:none
}

I have a maincontent placeholder that displays the page. Id like to keep the selected list color until I click another list to display another page.
Hi!

Try this, creat new Web Application and paste this in Default.aspx page
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="WebApplication11._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <style type="text/css">
        ul
        {
            list-style: none;
        }
        li
        {
            float: left;
            width: 75px;
            text-align: center;
        }
        li a
        {
            text-decoration: none;
        }
        .selected
        {
            background-color: red;
        }
    </style>
    <script type="text/javascript">
        function clkOne() {
            debugger;
            document.getElementById("mnuOne").className = 'selected';
        
        }

        function clkTwo()
        { }

        function clkThree()
        { }    
    </script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <ul id="nav">
        <li id="mnuOne" onclick="clkOne()" ><a href="#">Menu 1</a></li>
        <li id="mnuTwo" onclick="clkTwo()"><a href="#">Menu 2</a></li>
        <li id="mnuThree" onclick="clkThree()"><a href="#">Menu 3</a></li>
    </ul>
</asp:Content>

Open in new window


Thanks!
ASKER CERTIFIED SOLUTION
Avatar of Navneet Hegde
Navneet Hegde
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I appreciate the novelty! Can you fix my code too? thanks
Hi!
Post your HTML as well


Thanks!
<div id="leftContent">
        <div id="Navigation">
            <h3>
                To dos
            </h3>
            <ul>
                <li><a href="Add.aspx">Add</a></li>
                <li><a href="Minus.aspx">Minus</a></li>
                <li><a href="Delete.aspx">Delete</a></li>
                <li><a href="Search">Search</a></li>
                <li><a href="SearchPerson.aspx">List of Person</a></li>
                 <li><a href="Del.aspx">List of Deletes</a></li>
                <li><a href="Edit.aspx">Edit</a></li>
            </ul>
            <h3>
                To watch
            </h3>
            <ul>
                <li><a href="SS.aspx">KL Workflow</a></li>
                <li><a href="Win.aspx">FUND Workflow</a></li>
                <li><a href="PAM.aspx">PAM Workflow</a></li>
                <li><a href="VPI.aspx">VP Workflow</a></li>
                <li><a href="FS.aspx">FS Workflow</a></li>
            </ul>
        </div>
    </div>
any comments?