无法突出显示所选菜单 [英] Not able to highlight the selected menu

问题描述

Hi,

I am struggling to highlight the parent and child menu same using css.

For example,

1. when i select parent menu that will be working perfect.

2. But, when i select parent manu followed by child menu then, parent menu will not be highlighting. rather than child menu only high lighting. some of them i tried below code. but, still not working...

master page code :

Parent menu  

<div id="top_menu">
                    <ul>
                        <li><a id="li1" href="Home.aspx" style="font-family: Arial; font-weight: bold">Home</a></li>
                        <li id="li1" runat="server" visible="false"><a href="Admin1.aspx"    style="font-family: Arial; font-weight: bold">Administrator</a> </li>
                        <li id="li2" runat="server" visible="false"><a href="Student.aspx"  style="font-family: Arial; font-weight: bold">Student</a> </li>
                        <li id="li3" runat="server"><a href="Schools.aspx" style="font-family: Arial; font-weight: bold"> Schools</a> </li>
                        <li><a style="font-family: Arial; font-weight: bold">About us</a></li>
                        <li><a href="Contactus.aspx" style="font-family: Arial; font-weight: bold">Contact</a></li>
                    </ul>
                </div>

Child Menu

<div id="Tab">
<ul>
<li><a href="Admin1.aspx" style="font-family: Arial; font-weight: bold">Admin1</a></li>
<li><a href="Admin2.aspx" style="font-family: Arial; font-weight: bold">Admin2</a> </li>
<li><a href="Admin3.aspx" style="font-family: Arial; font-weight: bold">Admin3</a> </li>
<li><a href="Admin4.aspx" style="font-family: Arial; font-weight: bold">Admin4</a> </li>
</ul>
</div>

CSS Code

<style type="text/css">
#top_menu
{

width: 96%;
height: 45px;
padding: 3px 25px;
background: url(images/top_menu.png) no-repeat;
}

#top_menu #home_menu a
{
float: left;
display: block;
width: 46px;
height: 46px;
margin-right: 40px;
background: url(images/top_home.png) no-repeat;
position: relative;
}

#top_menu #home_menu a:hover
{
background: url(images/top_home_hover.png) no-repeat;
}


#top_menu ul
{
margin: 0;
padding: 7px 0 0 0;
list-style: none;
position:absolute;
left:150px;
}

#top_menu ul li
{
padding: 0px;
margin: 0px;
display: inline;

}

#top_menu ul li a
{
float: left;
line-height: 30px;
text-decoration: none;
text-align: center;
display: block;
width: 110px;
height: 30px;
border: thin solid #999;
color: #FFF;
background-color: #D20054;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
/*transition: all 0.3s ease-out;
transition: display 0s linear 0.5s,opacity 0.5s linear;*/
}

#top_menu ul li a:hover, #top_menu ul li .current
{
background-color: #0C3;
}
</style>

<style type="text/css">
#Tab
{
width: 96%;
height: 45px;
padding: 3px 25px;

}



#Tab a:hover
{
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffab23), color-stop(1, #ffec64) );
background: -moz-linear-gradient( center top, #ffab23 5%, #ffec64 100% );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64');
background-color: #ffab23;
}


#Tab ul
{
margin: 0;
padding: 7px 0 0 0;
list-style: none;
position: absolute;
left: 150px;
}

#Tab ul li
{
padding: 0px;
margin: 0px;
display: inline;
}

#Tab ul li a
{
float: left;
line-height: 30px;
text-decoration: none;
text-align: center;
display: block;
width: 110px;
height: 30px;
border: thin solid #999;
color: #FFF;
background-color: #D20054;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out; /*transition: all 0.3s ease-out; transition: display 0s linear 0.5s,opacity 0.5s linear;*/
}

#Tab ul li a:hover, #Tab ul li .current
{
background-color: #0C3;
}

#Tab ul li a.active
{
background: #ff9900;
color: #ffffff;
}
</style>

<script type="text/javascript">
$(function () {

$('#tooplate_menu ul li a').each(function () {
var path = window.location.href;
var current = path.substring(path.lastIndexOf('/') + 1);
var url = $(this).attr('href');

if (url == current) {
$(this).addClass('active');
};
});
});
</script>
<script type="text/javascript">
$(function () {

$('#Tab ul li a').each(function () {
var path1 = window.location.href;
var current1 = path1.substring(path1.lastIndexOf('/') + 1);
var url1 = $(this).attr('href');

if (url1 == current1) {
$(this).addClass('active');
};
});
});
</script>

Problem.

When i select admin menu (parent menu) then child first menu (Admin1) will be working. but, when i select second child menu then

first parent admin menu will not be highlighting..

why..?

我尝试了什么：



请愿。 check描述问题

What I have tried:

pls. check Describe the problem

推荐答案

（function（）{

(function () {

（' #tooplate_menu ul li a'）。each（function（）{
var path = window.location.href;
var current = path.substring（path.lastIndexOf（' /'）+ 1 ）;
var url =

('#tooplate_menu ul li a').each(function () { var path = window.location.href; var current = path.substring(path.lastIndexOf('/') + 1); var url =

（ this ）。attr（' href'）;

if （url == current ）{

(this).attr('href'); if (url == current) {

这篇关于无法突出显示所选菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！