Question

我有一个功能可以切换隐藏的div并且可以很好地工作。不幸的是，“品牌”部分刚刚变为“品牌”。代码是由你们中的一个天才动态地改进和编写的，并使用锚点的内容名称来选择要显示/隐藏的div。不幸的是，我需要THE（太空）品牌。没有bueno！

想法？谢谢！

P.S。如果你把THE带出“show_brand”锚点，这个功能就可以了。

HTML：

    <div id="nav">
        <div id="nav_left">
            <a class="home" id="show_brand" title="BRAND">THE BRAND</a><br />
            <a class="home" id="show_campaigns" title="CAMPAIGNS">CAMPAIGNS</a><br />
            <a href="collection/" title="COLLECTION">COLLECTION</a><br />
            <a class="home" id="show_inquiries" title="INQUIRIES">INQUIRIES</a>
        </div>
        <div id="campaigns">
            <a href="campaigns/neo_balletto/" title="NEO BALLETTO">NEO BALLETTO</a><br />
            <a href="campaigns/poetic_deco/" title="POETIC DECO">POETIC DECO</a>
        </div>
    </div>
    <div class="current" id="brand">
        <p>content</p> 
    </div>
    <div id="inquiries">
        <p>content</p>
    </div>

使用Javascript：

$('#brand, #campaigns, #inquiries').hide();
$('.home').click(function() {
    var id = $(this).html().toLowerCase();
    var $content = $('#' + id + ':not(:visible)');
    if ($('.current').length === 0) {
        showContent($content)
    }
    else {
        $('.current').fadeOut(600, function() {
            showContent($content)
        });
    }
    $('.home').css('text-decoration', 'none');
    $(this).css('text-decoration', 'underline');
});
function showContent(content) {
    content.fadeIn(600);
    $('.current').removeClass('current');
    content.addClass('current');
}
$('.close').click(function() {
    $('.current').fadeOut(600);
});

Answer 1

我能想到的两种方式：

1）使用title属性导航到DIV并切换可见性。即：

$('#brand, #campaigns, #inquiries').hide();
$('.home').click(function() {
    var id = $(this).attr("title").toLowerCase(); // note the change from html to attr("title")
    var $content = $('#' + id + ':not(:visible)');
    if ($('.current').length === 0) {
        showContent($content)
    }
    else {
        $('.current').fadeOut(600, function() {
            showContent($content)
        });
    }
    $('.home').css('text-decoration', 'none');
    $(this).css('text-decoration', 'underline');
});
function showContent(content) {
    content.fadeIn(600);
    $('.current').removeClass('current');
    content.addClass('current');
}
$('.close').click(function() {
    $('.current').fadeOut(600);
});

2）将div的id从brand更改为the_brand并使用下面的JS：

$('#brand, #campaigns, #inquiries').hide();
$('.home').click(function() {
    var id = $(this).html().toLowerCase().replace(/\s/g, "_"); //Replace spaces with _ got ID
    var $content = $('#' + id + ':not(:visible)');
    if ($('.current').length === 0) {
        showContent($content)
    }
    else {
        $('.current').fadeOut(600, function() {
            showContent($content)
        });
    }
    $('.home').css('text-decoration', 'none');
    $(this).css('text-decoration', 'underline');
});
function showContent(content) {
    content.fadeIn(600);
    $('.current').removeClass('current');
    content.addClass('current');
}
$('.close').click(function() {
    $('.current').fadeOut(600);
});

Answer 2

好吧，只需改变

var id = $(this).html().toLowerCase();

到

var id = $(this).attr("id").replace("show_","").toLowerCase();

无论div的内容是什么

，您的代码都会正常工作

检查http://jsfiddle.net/3AnZw/1/是否有演示

Answer 3

如果您可以将ID品牌更新为“the_brand”，那么您只需添加

即可

var id = $(this).html().toLowerCase().replace(' ', '_');

也就是说，用ID中的下划线替换空格以选择它。如果这不是一个选项而您只想总是使用最后一个单词，请执行以下操作：

var id = $(this).html().toLowerCase().replace(/.* /, '');

这个正则表达式将替换最后一个空格的所有内容，留下最后一个字（用品牌测试）

Answer 4

尝试类似：

var $content = $('div[id="' + id + '"]:not(:visible)');

jQuery用多个单词名称切换隐藏的div问题

4 个答案: