我有一个带有脚本的网站。当您单击链接时,它会切换页面,并且链接本身也会使用 jquery 的 toggleClass 方法进行切换。
该脚本运行良好,但页面加载在彼此之上,所以我对其进行了一些更改。如果您第一次单击链接,则链接会更改(更大)并出现页面。链接的值存储在变量 (previousClick) 中。现在,如果我点击第二个链接,前一页就会消失,而新的一页就会出现。这工作正常。但是之前的链接仍然更大。我不知道如何将其恢复为较小的字体...
这是代码:
var pages = function()
{
var nav = $( 'ul#nav li a' );
var previousClick = '';
nav.click( function()
{
if (previousClick.length==0)
{
$( this ).parent().toggleClass( 'selected' );
$( $( this ).attr( 'href' ) + '-page' ).toggle( 500 );
previousClick = $( this ).attr( 'href' );
return false;
}
else
{
$('li a [href=' + previousClick + ']').toggleClass( 'selected' );
$( previousClick + '-page' ).toggle( 500 );
$( this ).parent().toggleClass( 'selected' );
$( $( this ).attr( 'href' ) + '-page' ).toggle( 500 );
previousClick = $( this ).attr( 'href' );
return false;
}
});
};
$( window ).load( pages );
的CSS:
ul#nav li { padding: 1px; }
ul#nav li a
{
font: italic normal 20px/normal 'Palatino Linotype', Georgia, Comic sans MS, Times, Serif;
text-decoration: none;
text-shadow: 0 1px 0 #000;
position: relative;
z-index: 3;
color: #fff;
display: block;
}
ul#nav li a span
{
font-size: 28px;
font-family: Baskerville, Palatino, 'Palatino Linotype', Georgia, Serif;
/*color: #3b0314;*/
color: #FEDB00;
}
ul#nav li a:hover,
ul#nav li.selected a
{
font-size: 200%;
}
以及 html 中的菜单:
<ul id="nav">
<li id="star-top"></li>
<li><a href="#société"><span>Qui</span>sommes nous?</a></li>
<li><a href="#coachingé">Coaching<span>à</span>domicile</a></li>
<li><a href="#entrainementé"><span>Plan</span>d'entrainement</a></li>
<li><a href="#aquatiqueé"><span>Activités</span>aquatiques</a></li>
<li><a href="#entreprisé"><span>Espace</span>Entreprise</a></li>
<li id="star-bot"></li>
<li><a href="#contact">Contactez<span>nous</span></a></li>
<li><a href="#partenaire"><span>Nos</span>partenaires</a></li>
</ul>
非常感谢