1

私は現在ウェブサイトに取り組んでおり、mainContent div には 5 つの div があります。1 つの div はデフォルトで表示され、他の 4 つは非表示になっています (注: デフォルトで表示される div はホームページのコンテンツに対応しています)。また、非表示/表示の各 div に対応する sideMenu に 5 つのリンクがあります。

私が達成しようとしている目標は、Jscriptを使用して次のとおりです。

  • sideMenu からリンクの 1 つをクリックすると、対応する div が表示され (非表示の場合)、残りの div が非表示になります。

誰でもポインタを手伝ってもらえますか?

イラストを試す:

->>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

デフォルトのホームページ:

リンク1 | リンク2 | リンク3

contentDiv:

div1 - 可視

div2 - 非表示

div3 - 非表示

->>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

Link2 が押されました:

リンク1 | リンク2 | リンク3

contentDiv:

div1 - 非表示

div2 - 可視

div3 - 非表示

4

3 に答える 3

0

あなたのhtmlが次のようなものだとしましょう：

<ul>
<li><a  class='link' data-linkno='1' href="#">Link 1</a></li>
<li><a class='link' data-linkno='2' href="#">Link 2</a></li>
<li><a class='link' data-linkno='3' href="#">Link 3</a></li>
</ul>
<div class='content' id='div1">blah</div>
<div class='content' id='div2">blah</div>
<div class='content' id='div3">blah</div>

次のjQueryまたは同様のものが機能するはずです

 $(function() {
       $(".link").live("click", function(e) {
       $(".content").hide();
       $("#div"+$(this).data("linkno")).show();
        })
    })
于 2012-07-19T16:08:00.347 に答える
0

私はjQueryを使用して、このようなことをします

function changePage(page){
    $('#contentDiv').children('div').each(function(){
         if($(this).css('display') != 'none')
         {
              $(this).css('display', 'none'))
         }
});

      switch(page){
         case 1:
             //make home visible
         break;
         case 2:
             //make about visible
         break;
         case 3:
             //make contact visible
         break;

       }
}

これらのボタンはサイドバーにあり、クリックすると機能に移動し、現在表示されているページを非表示にしてから、スイッチを使用して表示する新しいページを決定します

<button onclick="changePage(1)">Home</button>
<button onclick="changePage(2)">About</button>
<button onclick="changePage(3)">Contact</button>

Ps 私は実際にこのコードをチェックしていませんが、あなたはその考えを理解していると思います

于 2012-07-19T16:00:59.060 に答える
0

すべてのコンテンツ div に共通のクラス名 (「contentPanel」など) を付け、それぞれ#home-panelに、 などの一意の ID を付けます。ホーム div#page1-panelを除いて、これらすべてにスタイルを設定する必要があります。display:none次のようにリンクを設定します。

<a href="#home-panel" class="panel-link">Home</a>
<a href="#page1-panel" class="panel-link>Page1</a>
<!-- etc.. -->

スクリプトの場合、1 つの提案はjQueryを使用することです。のように見えるかもしれません

$(".panel-link").click(function() {
    var target = $(this).attr("href");
    $(".contentPanel").hide();
    $(target).show();
});

ブラウザーの履歴の変更と並行してスクリプトを正しく実行したい場合は、Ben Alman の jQuery ハッシュ変更プラグイン ( http://benalman.com/projects/jquery-hashchange-plugin/ ) を確認してください。私はこれを私の古いウェブサイトで使用しました: http://paislee.net/ .

于 2012-07-19T16:02:12.797 に答える