Question

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

Answer 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
});

Answer 2

根据你的来源，以及它在我的小提琴中起作用的事实（http://jsfiddle.net/GjuYK/1/）我猜你会忘记

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>

Answer 3

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

.hide()的正确参数是一个字符串，表示速度和/或函数（）回调。

我认为您只需要在没有参数的情况下调用.hide()。

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

3 个答案: