0

我是 jquery 的新手，并且编写了以下代码来在我正在设计的页面的内容 div 之间切换。我希望默认隐藏三个内容 div，然后如果单击标题，我希望该内容 div 可见。如果单击不同的标题，我希望 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

对所有标题使用一个类 - .tab_title- 对所有选项卡使用一个类 - .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 回答