javascript - 当显示特定的 div 时设置导航链接的样式

Question

我让 JQuery 在单击某个链接时显示特定的 div。 通过对 body 标记进行 id 标记并在找到 id 时使用 css 设置样式，我已经成功地在主导航栏上应用了我想要的效果。

但是，当存在某个 div 时，我想对子导航应用相同的效果。

主导航的样式:

HTML:

<nav>
<ul>
<li id="nav-home"><a href="index.html">Home</a></li>
<li id="nav-showreel"><a href="showreel.html">Showreel</a></li>
<li id="nav-portfolio"><a href="portfolio.html">Portfolio</a></li>
<li>Contact</li>
</ul>
</nav>

CSS:

body#home li#nav-home, 
body#portfolio li#nav-portfolio
{
background: url("Images/Nav_Underline.png") no-repeat;
background-position: center bottom;
color: white;
}

(其他链接尚未添加到样式中，因为这些页面仍在开发中)

子导航的结构:

<nav id="portfolioNav">
<ul>
<li id="portfolio-compositing"><a id="compositingWork" href="#">Compositing</a></li>
<li id="portfolio-animation"><a id="animationWork" href="#">Animation</a></li>
<li id="portfolio-motionGfx"><a id="GFXWork" href="#">Motion Graphics</a></li>
<li id="portfolio-3D"><a id="3DWork" href="#">3D</a></li>
</ul>
</nav>

如您所见，它的格式与主导航类似，但是我尝试了相同的方法但它不起作用:(

在导航点击时切换 div 的 Javascript:

<script type="text/javascript">

$(document).ready(function() {

$('#3DWork').click(function(){

    $('#portfolioWork').load('portfolioContent.html #Portfolio3D');
});

$('#GFXWork').click(function(){

    $('#portfolioWork').load('portfolioContent.html #motionGraphics');
});

$('#compositingWork').click(function(){

    $('#portfolioWork').load('portfolioContent.html #PortfolioCompositing');
});
$('#animationWork').click(function(){

    $('#portfolioWork').load('portfolioContent.html #PortfolioAnimation');
});

});
</script>

用于完整 HTML 和 CSS 的 JSFiddle:JSFiddle File

我想要的效果:

Answer 1

您可以像这样修改您的脚本:

$('#compositingWork').click(function(){
        $(this).addClass('active');
        $('#portfolioWork').load('portfolioContent.html #PortfolioCompositing');
    });

并将其添加到 css:

.active
{
background: url("Images/Nav_Underline.png") repeat-x;
background-position: center bottom;
}

更新。但更简单的方法是组合相似的字符串:

$(document).ready(function() {
    // bind link id and id for load()
    var loadDiv = {
        '3DWork': 'Portfolio3D',
        'GFXWork': 'motionGraphics',
        'compositingWork': 'PortfolioCompositing',
        'animationWork': 'PortfolioAnimation'
    };
    var links = $('#3DWork, #GFXWork, #compositingWork, #animationWork');
    links.click(function(e) {
        e.preventDefault();
        // remove effect from all links
        links.parent('li').removeClass('active');
        // and add to clicked one
        $(this).parent('li').addClass('active');
        // load you contant using array of ids
        $('#portfolioWork').load('portfolioContent.html #'+loadDiv[this.id]);
    });
});

此外，我认为您不需要图像来实现这种效果。为什么不使用具有所需宽度和颜色的边框底部样式？

检查这个例子http://jsfiddle.net/vladkras/sJNMR/ (我还根据您的需要添加了“prevent default”操作)