0

特定のリンクがクリックされたときに特定の div を表示するために JQuery を使用しています。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 ファイル

私が求めている効果：私が求めている効果：

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 に答える