在显示特定div时设置导航链接

Question

我让JQuery在点击某个链接时显示特定的div。 我已经设法通过id body标签应用我在主导航栏后面的效果，并在找到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>

JSFiddle for full HTML＆amp; CSS：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;
}

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

$(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]);
    });
});

我也不认为你需要这个效果的图像。为什么不使用带有宽度和颜色的border-botom样式？

查看此示例http://jsfiddle.net/vladkras/sJNMR/ （我还添加了＃34; prevent default＆＃34;根据您的需要采取行动）