想要在 div 之间切换，以便只有一个可见答案

【问题标题】：Want to toggle between divs so that only one is visible想要在 div 之间切换，以便只有一个可见
【发布时间】：2012-12-05 21:57:31
【问题描述】：

我是 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>

【问题讨论】：

不起作用是对问题的非常无益的描述。如何不起作用？是否会抛出异常？结果是不是出乎意料？你现在所拥有的似乎正在工作：jsfiddle.net/NAFCc
为我工作。这是一个糟糕的测试，但你会发现它有效：jsfiddle.net/Jb87v
看到这个post
也适用于我jsfiddle.net/GjuYK/1 :) 你的 jquery 脚本包含在哪里？

标签： jquery html show-hide

【解决方案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>

【讨论】：

正如我所说，我是 jquery 的新手。这正是我的问题，而不是代码本身。非常感谢。

【解决方案2】：

对所有标题使用一个类 - .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
});

【讨论】：

谢谢，更简洁的解决方案。

【解决方案3】：

您对.hide() 的调用包含字符串“bind”。

.hide() 的正确参数是表示速度和/或 function() 回调的字符串。

我想你只需要不带参数地调用.hide()。

【讨论】：