我有一个单页网站,当我点击菜单时,内容将通过jquery替换。虽然这些项目没有链接到不同的页面,只是不同的div,但我希望菜单的行为类似于具有3种活动状态的常规网站菜单:不活动,悬停和“当前内容”(如当前/活动页面但赢了实际上是链接到另一个页面。
我希望每个单独的链接在点击时与其悬停颜色匹配,并且处于“当前内容”状态。 (现在我只有一个jquery片段,可以将任何'当前'链接变为红色......如果可能的话,我想要更多的控制权)我希望这有意义...下面的代码!
HTML
<div id="sidebar">
<nav>
<ul id="nav">
<li id="home"><a id="showdiv1">Home</a></li>
<li id="about"><a id="showdiv2">About</a></li>
<li id="demoReel"><a id="showdiv3">Demo Reel</a></li>
<li id="contact"><a id="showdiv4">Contact</a></li>
</ul><!-- /#nav -->
</nav>
</div><!-- /#sidebar -->
<div id="content">
<div id="div1">Blah blah!</div>
<div id="div2" style="display:none;">Blardy blah!</div>
<div id="div3" style="display:none;">Moo!</div>
<div id="div4" style="display:none;">Shmeee!</div>
</div><!-- /#content -->
CSS
#sidebar {
float:right;
width:30%;
}
ul#nav li#home a:hover { color:red;}
ul#nav li#about a:hover { color:green; }
ul#nav li#demoReel a:hover { color:blue; }
ul#nav li#contact a:hover { color:yellow; }
.active a { color:red; }
#content {
float:left;
width:60%;
}
Jquery的
$(function() {
//Highlight active navigation link
$("ul").delegate("li", "click", function() {
$(this).addClass("active").siblings().removeClass("active");
});
//Fade-in/hide selected navigation link
$('#showdiv1').click(function() {
$('div[id^=div]').hide();
$('#div1').fadeIn();
});
$('#showdiv2').click(function() {
$('div[id^=div]').hide();
$('#div2').fadeIn();
});
$('#showdiv3').click(function() {
$('div[id^=div]').hide();
$('#div3').fadeIn();
});
$('#showdiv4').click(function() {
$('div[id^=div]').hide();
$('#div4').fadeIn();
});
})
我想要注意的是,我对这些东西非常新,完全是自学,所以请原谅我的错误。更重要的是,非常感谢你提前帮助!!!
答案 0 :(得分:2)
而不仅仅是
.active a { color:red; }
尝试替换
ul#nav li#home a:hover { color:red;}
ul#nav li#about a:hover { color:green; }
ul#nav li#demoReel a:hover { color:blue; }
ul#nav li#contact a:hover { color:yellow; }
与
ul#nav li#home a:hover, ul#nav li#home.active a { color:red;}
ul#nav li#about a:hover, ul#nav li#about.active a { color:green; }
ul#nav li#demoReel a:hover, ul#nav li#demoReel.active a { color:blue; }
ul#nav li#contact a:hover, ul#nav li#contact.active a { color:yellow; }
这样,每个链接在其父级“活动”时悬停或时会获得其特殊颜色。