zachvaldez
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.
ASKER
Please show the step to do it . thanks.
Do you have some example code?
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.
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
Thanks!
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>
Thanks!
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I appreciate the novelty! Can you fix my code too? thanks
Hi!
Post your HTML as well
Thanks!
Post your HTML as well
Thanks!
ASKER
<div id="leftContent">
<div id="Navigation">
<h3>
To dos
</h3>
<ul>
<li><a href="Add.aspx">Add</a></l i>
<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">L ist 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>
<div id="Navigation">
<h3>
To dos
</h3>
<ul>
<li><a href="Add.aspx">Add</a></l
<li><a href="Minus.aspx">Minus</a
<li><a href="Delete.aspx">Delete<
<li><a href="Search">Search</a></
<li><a href="SearchPerson.aspx">L
<li><a href="Del.aspx">List of Deletes</a></li>
<li><a href="Edit.aspx">Edit</a><
</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>
ASKER
any comments?
On Click set the CSS class for that selected item.
Thanks!