0

div タグを表示および非表示にし、他のすべてを非表示にする関数を作成したい:

function showPage(showdiv){
    $('#midRight').not(showdiv).hide(); 
    $(showdiv).show();  
}

関数を呼び出すリンク:

<ul>
  <a style="cursor:pointer;" onclick="showPage('#home_page1')">
    <li>Show Page 1</li>
  </a>
  <a style="cursor:pointer;" onclick="showPage('#home_page2')">
    <li>Show Page 2</li>
  </a>
</ul>

DIVのページ:

<div id="midRight">
    <div id="home_page1">Content 1</div>
    <div id="home_page2" style="display:none;">Content 2</div>
</div>

この関数は最終的にshowPage内のすべての divを非表示にしますがmidRight、JSFiddle ではクリック イベントはまったく処理されないようです。

jQueryでDIVを表示/非表示にする正しい方法は何ですか?

4

4 に答える 4

6

のすべての子 div を非表示にするセレクターを記述してからmidRight、渡された ID で div を表示できます。それがあなたが渡しているものなので、文字列にキャストする必要はありません：

function showPage(showdiv){
    $('#midRight > div').hide()  
    $(showdiv).show();    
}
于 2013-07-01T17:28:44.580 に答える
3

いくつかの構文エラーを修正しました。コメントにあるように、変数に空の文字列を追加しているため、変数を使用するだけです。また、対象のコンテナの子を選択するようにセレクタに指示する必要があります。

function showPage(showdiv){
    $('#midRight').children().not(showdiv).hide();  
    $(showdiv).show();  
}

デモ: http://jsfiddle.net/ACGMj/1/

于 2013-07-01T17:28:53.063 に答える
1

デモ

function showPage(showdiv){
    $(showdiv).show().siblings().hide();
}

または、ID を使用しない場合:

デモ

$('ul a').click(function() {
    var index = $(this).index();
    $('#midRight > div').hide().eq(index).show();
});
于 2013-07-01T17:30:36.023 に答える
1

関数が見つからないため、フィドルが機能していません。 で解釈される関数を指定したため、関数が見つかりませんonLoad。これを修正するには、jsFiddle の左上にあるドロップダウンを からonLoadに設定しNo wrap - in <body>ます。

インライン イベントを使用しない作業バージョンを次に示します。

http://jsfiddle.net/gRDdC/

<ul>
 <li>
  <a style="cursor:pointer;" class="nav-link" href="#home_page1">Show Page 1</a>
 </li>
 <li>
  <a style="cursor:pointer;" class="nav-link" href="#home_page2">Show Page 2</a>
 </li>
</ul>

<div id="midRight">
    <div id="home_page1">Content 1</div>
    <div id="home_page2" style="display:none;">Content 2</div>
</div>


$(document).ready(function() {
    $('.nav-link').click(function(e) {
        e.preventDefault();
        $('#midRight > div').hide();
        $($(this).attr('href')).show();
    });
});
于 2013-07-01T17:32:11.990 に答える