0

当单击某个链接时，我让 JQuery 工作以显示特定的 div。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>

用于完整 HTML 和 CSS 的 JSFiddle：JSFiddle 文件

我追求的效果：我追求的效果：

4

1 回答 1

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/ （我还为您的需要添加了“防止默认”操作）

于 2013-06-30T01:12:36.070 回答