私は 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>