0

jqueryでこれを行うことが可能かどうか知っていますか？

カテゴリリンクがあります：

<ul>
<li><a href="#">Tools</a></li>
<li><a href="#">Moulds</a></li>
<li><a href="#">Videos</a></li>
</ul>

コンテンツはdivで区切られています

<div id="tools">This is the tools content</div>
<div id="moulds">This is the moulds content</div>
<div id="videos">This is the videos content</div>

デフォルトでは、ツールのコンテンツが表示され、他の2つ（金型とビデオ）のdivは非表示になります。メニューがクリックされたときにのみ表示されます。その上、他のdivをロードするときにロード画像を配置したり、フェードインフェードアウトアニメーションのようなものを配置したりすることは可能ですか？

これはできますか？私はstackoverflowを検索しますが、どれも私が望むものを満たしていません。

前もって感謝します！

4

2 に答える 2

2

タブなどを使ってみませんか。とにかく、この方法で行うことができますが、前に、HTMLを次のように変更します。

<ul>
    <li><a href="#tools">Tools</a></li>
    <li><a href="#moulds">Moulds</a></li>
    <li><a href="#videos">Videos</a></li>
</ul>

そしてJavaScriptでこのように与えます：

$("ul li a").click(function(){
    theDiv = $(this).attr("href");
    $(theDiv).show();
});

1つだけを表示したい場合はdiv、次のように実行できます。

$("ul li a").click(function(){
    $("div").hide();
    theDiv = $(this).attr("href");
    $(theDiv).show();
});

私の提案は、<div>sと<a>sの両方に共通のクラスを使用することです。

最後に、あなたはこれに到達するかもしれません：

<ul>
    <li><a class="link" href="#tools">Tools</a></li>
    <li><a class="link" href="#moulds">Moulds</a></li>
    <li><a class="link" href="#videos">Videos</a></li>
</ul>

<div class="tab" id="tools">This is the tools content</div>
<div class="tab" id="moulds">This is the moulds content</div>
<div class="tab" id="videos">This is the videos content</div>

そして、イベント処理は次のようになります。

$(".link").click(function(){
    $(".tab").hide();
    theDiv = $(this).attr("href");
    $(theDiv).show();
});
于 2013-03-24T13:37:51.827 に答える
0

hy

jqueryではフェードは非常に簡単です。ここにサンプル

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<h1>js test</h1>

<ul id="myMenu">
    <li><a href="#" data-id="tools">Tools</a></li>
    <li><a href="#" data-id="modules">Moulds</a></li>
    <li><a href="#" data-id="videos">Videos</a></li>
</ul>

<div class="subcontent" id="tools" style="display:block">tools</div>
<div class="subcontent" id="modules">modules</div>
<div class="subcontent" id="videos">videos</div>

<script type="text/javascript">
$(document).ready(function()
{
    $('#myMenu').on('click','a',function()
    {
        // fade out all open subcontents
        $('.subcontent:visible').fadeOut();
        // fade in new selected subcontent
        $('.subcontent[id='+$(this).attr('data-id')+']').fadeIn();
    });
});
</script>

<style type="text/css">
    div.subcontent { display:none; }
</style>

イベントハンドラーを$（'＃myMenu'）。on（..）に登録します。魔女は、リンク要素（a）のクリックをリッスンし、最初に開いている（表示されている）すべてのdivをフェードアウトします。次に、フェードインから始まります。この場合、フェードアウトとフェードインのメソッドが同時に開始されます。コールバック関数を使用すると、この2つのステップを次々に呼び出すことができます。

于 2013-03-24T14:03:36.687 に答える