menu ativo

[Ner0 6]

Olá amigos eu faço curso de web designer a alguns meses e já aprendi muito com o curso porem estou com uma duvida, eu citei 3 páginas html abaixo e quando digita exemplo http://localhost/index.html'>http://localhost/index.html a opção HOME do menu fica ativo, com a cor azul e as outras pretas, já quando digita as outras páginas como index2.html e contato.html acontece o mesmo, o menu está funcionando perfeitamente como eu queria, com cada opção de página ativo.

 

Agora a minha duvida é a seguinte, eu quero que quando eu digitar o url do meu site http://localhost a opção HOME do menu que está na index.html fique ativo, porque ele só fica quando eu digito o url http://localhost/index.html'>http://localhost/index.html

 

 

-----------------------------

 

index.html

<link href="main.css" rel="stylesheet" type="text/css">

<script src="scripts/DD_belatedPNG_0.0.7a.js" type="text/javascript"></script>

<!--[if lte IE 6]>

<script type="text/javascript">

DD_belatedPNG.fix('img, #wrap-header, #quick-contact, #right, ul');

</script>

<![endif]-->

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("li a[href="+location.href.substring(location.href.lastIndexOf("/")+1,255)+&quot]").addClass("diferente");

});

</script>

</head>

 

<div id="nav">

<ul>

<li><a href="index.html">Home</a></li>

<li><a href="index2.html">Index2</a></li>

<li><a href="contato.html">Contact</a></li>

</ul>

index2.html

<link href="main.css" rel="stylesheet" type="text/css">

<script src="scripts/DD_belatedPNG_0.0.7a.js" type="text/javascript"></script>

<!--[if lte IE 6]>

<script type="text/javascript">

DD_belatedPNG.fix('img, #wrap-header, #quick-contact, #right, ul');

</script>

<![endif]-->

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("li a[href="+location.href.substring(location.href.lastIndexOf("/")+1,255)+&quot]").addClass("diferente");

});

</script>

</head>

 

<div id="nav">

<ul>

<li><a href="index.html">Home</a></li>

<li><a href="index2.html">Index2</a></li>

<li><a href="contato.html">Contact</a></li>

</ul>

contato.html

<link href="main.css" rel="stylesheet" type="text/css">

<script src="scripts/DD_belatedPNG_0.0.7a.js" type="text/javascript"></script>

<!--[if lte IE 6]>

<script type="text/javascript">

DD_belatedPNG.fix('img, #wrap-header, #quick-contact, #right, ul');

</script>

<![endif]-->

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("li a[href="+location.href.substring(location.href.lastIndexOf("/")+1,255)+&quot]").addClass("diferente");

});

</script>

</head>

 

<div id="nav">

<ul>

<li><a href="index.html">Home</a></li>

<li><a href="index2.html">Index2</a></li>

<li><a href="contato.html">Contact</a></li>

</ul>

main.css

a{color:Black;}

a:hover{color:Black;}

a:active{color:Blue;}

 

#selected{

color:Yellow;

}

 

#nav ul{

position:absolute;

width:349px;

left:23px;

top:149px;

background:url(../images/nav.png);

background-repeat:no-repeat;

list-style:none;

padding-left:15px;

}

#nav li{

display:inline;

}

#nav li a{

font-family:Verdana, Geneva, sans-serif;

font-size:10px;

text-transform:uppercase;

text-decoration:none;

padding-right:20px;

font-weight:bold;

}

#nav li a:hover{

color: #FFF;

}

.diferente{

color:Blue;

text-decoration:none;

font-weight:bold;

font-variant:small-caps;

}

[tspenido 0]

Olha, você está usando algum tipo de programa para simular o host? WampServer, easyphp e outros? Ou é apenas uma pasta com o nome do local host?

[guilomaker 31]

boa noite amigo! primeiro lugar seu código está todo errado! mais vamos a sua duvida.

 

o certo e você criar uma classe para o link segue o exemplo.

 

INDEX.HTML

<div id="nav">
   <ul>
     <li><a href="index.html" class="ativo">Home</a></li>
     <li><a href="index2.html">Index2</a></li>
     <li><a href="contato">Contact</a></li>
   </ul>
</div>

 

INDEX2.HTML

<div id="nav">
   <ul>
     <li><a href="index.html">Home</a></li>
     <li><a href="index2.html" class="ativo">Index2</a></li>
     <li><a href="contato">Contact</a></li>
   </ul>
</div>

 

CONTATO.HTML

<div id="nav">
   <ul>
     <li><a href="index.html">Home</a></li>
     <li><a href="index2.html">Index2</a></li>
     <li><a href="contato"  class="ativo">Contact</a></li>
   </ul>
</div>

 

CSS

#nav .ativo {
   background:#333;
   width:auto;
   height:30px;
}

 

ai o css você tem que editar de acordo com o seu site, este e o modo correto e o mais simples ai cada pagina vai ter seu link com a classe ativo