0

私は jquery を初めて使用し、設計中のページのコンテンツ div を切り替える次のコードを作成しました。デフォルトで 3 つのコンテンツ div を非表示にし、ヘッダーをクリックするとそのコンテンツ div が表示されるようにします。一度に 1 つのみが表示されるように、別のヘッダーがクリックされた場合に div が自動的に閉じられるようにします。

このコードは機能すると思っていましたが、何らかの理由で機能しないようです。

コード:

<head>

<script type="text/javascript" language="javascript">

$('document').ready(function(){

$('#partnersContent').hide();
$('#companyContent').hide();
$('#investmentsContent').hide();

$('#partnersHeader').click(function(){
    $('#partnersContent').slideToggle('1000');
    $('#companyContent').hide('bind');
    $('#investmentsContent').hide('bind');
});

$('#companyHeader').click(function(){
    $('#companyContent').slideToggle('1000');
    $('#partnersContent').hide('bind');
    $('#investmentsContent').hide('bind');
});

$('#investmentsHeader').click(function(){
    $('#investmentsContent').slideToggle('1000');
    $('#companyContent').hide('bind');
    $('#partnersContent').hide('bind');
});

});
</script>
</head>

<body>

<div id='partners'>
    <div id='partnersHeader'>Partners</div>
    <div id='partnersContent'>Information about partners</div>
</div>
<div id='company'>
    <div id='companyHeader'>Company</div>
    <div id='companyContent'>Information about company</div>
</div>
<div id='investments'>
    <div id='investmentsHeader'>Investments</div>
    <div id='investmentsContent'>Information about investments</div>
</div>

</body>
</html>
4

3 に答える 3

1

次のように、すべてのヘッダーに 1 つのクラスを使用.tab_titleし、すべてのタブに 1 つのクラスを使用します.tab

    <body>

<div id='partners'>
    <div class="tab_title" id='partnersHeader'>Partners</div>
    <div class="tab" id='partnersContent'>Information about partners</div>
</div>
<div id='company'>
    <div class="tab_title" id='companyHeader'>Company</div>
    <div class="tab" id='companyContent'>Information about company</div>
</div>
<div id='investments'>
    <div class="tab_title" id='investmentsHeader'>Investments</div>
    <div class="tab" id='investmentsContent'>Information about investments</div>
</div>

</body>

CSS:

.tab { display:none; }

JS:

$('.tab_title').click(function(){
     $('.tab').hide(); // hide all tabs
     $(this).next().show(); // show relevant tab
});
于 2012-12-05T13:43:33.630 に答える
1

あなたの情報源と、それが私のフィドルで機能したという事実に基づいて(http://jsfiddle.net/GjuYK/1/)、忘れていたと思います

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
于 2012-12-05T13:45:38.503 に答える
0

.hide()文字列「バインド」を含めるための呼び出し。

の正しいパラメータ.hide()は、速度を表す文字列および/または function() コールバックです。

パラメータなしで呼び出すだけでよいと思います.hide()

于 2012-12-05T13:39:58.727 に答える