Avatar of zachvaldez
zachvaldez
Flag 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.
CSSJavaScriptASP.NET

Avatar of undefined
Last Comment
zachvaldez

8/22/2022 - Mon
Navneet Hegde

Hi!

On Click set the CSS class for that selected item.

Thanks!
zachvaldez

ASKER
Please show the step to do it . thanks.
Dean OBrien

Do you have some example code?
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
zachvaldez

ASKER
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.
Navneet Hegde

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
Navneet Hegde

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
zachvaldez

ASKER
I appreciate the novelty! Can you fix my code too? thanks
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Navneet Hegde

Hi!
Post your HTML as well


Thanks!
zachvaldez

ASKER
<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>
zachvaldez

ASKER
any comments?
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes