Question

我正在尝试创建一种效果，通过单击标题切换相应的内容div。在显示某些内容时单击另一个标题应该隐藏该内容div并显示与刚刚单击的标题对应的内容div。

但是代码没有做任何事情，正如您在以下jquery上看到的那样：http://jsfiddle.net/dPsrL/

有什么想法吗？

HTML：

    <div class="row title">
    <div class="title" industry_id="education">Ed</div>
    <div class="title" industry_id="tech">Tech</div>
    <div class="title" industry_id="finance">Fin</div>
</div>
<br>
<br>
<div class="row content">
    <div class="content" id="education">Education is great</div>
    <div class="content" id="tech">Technology is awesome</div>
    <div class="content" id="finance">Finance is super</div>
</div>

JAVASCRIPT：

    $(document).ready(function () {
    $('.content').hide();
});

('.title').on('click', function () {
    var clicked = $(this).attr('industry_id');
    alert(clicked);
    $("#"+clicked).toggle(400);
    $("#"+clicked).siblings().hide();
});

Answer 1

不是首先切换点击的元素然后隐藏其他元素，为什么不首先隐藏所有内容然后显示点击的元素？为您保存支票，您只需切换订单

即可

$('.title').on('click', function () {
    var clicked = $(this).attr('industry_id');
    alert(clicked);
    $('.content').hide();
    $('#' + clicked).show(400);
});

Answer 2

您的属性中没有id selector。你需要做一个字符串连接：

$('.title').on('click', function () {
    var clicked = $(this).attr('industry_id');
    alert(clicked);
    $('#' + clicked).toggle(400);
    $('#' + clicked).siblings().hide();
    //The two last lines could be :
    //$('#' + clicked).toggle(400).siblings().hide();
});

此外，您必须删除content上的课程title和row，因为它会触发点击事件和隐藏部分。

这是一个工作小提琴：http://jsfiddle.net/dPsrL/3/

Answer 3

('.title')上的错字。应该是$('.title')。此外，你可能不应该给容器divs与子divs相同的类，然后在CSS和jQuery中使用相同的类。这只会让选择变得更加困难。

<强> jsFiddle example

在Jquery中隐藏除某个类之外的所有元素

3 个答案: