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

我有一个切换隐藏的div的功能，可以很好地处理它。不幸的是，“品牌”部分刚刚变成了“品牌”。该代码被优雅地改进并由您的一位天才动态编写，并使用锚的内容名称来选择要显示/隐藏的div。不幸的是我需要（空间）品牌。没有bueno！jQuery用多个单词名称来切换隐藏的div问题

想法？谢谢！

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

来源

2011-03-01 technopeasant

也只是改变

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

到

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

而且你的代码将工作，无论什么div的内容是

检查http://jsfiddle.net/3AnZw/1/用于演示

来源

2011-03-01 05:38:43

钉它。下划线切换时遇到问题。当点击一个到另一个时，它会切换到其他菜单项，但在单击.close类或活动div的名称时不会消失。想法？这个问题是张贴在这里： http://stackoverflow.com/questions/5149609/navigation-toggle-underline-while-subseque-showing-and-hiding-divs-with-jquer – technopeasant 2011-03-01 05:51:49

嗯，我没有读过这个问题，但couldn真的不明白你的要求 – 2011-03-01 05:59:04

啊，我以为我昨天晚上更新了这个问题，我真的没有。只是提出了更具体和明确的问题。如果你有时间，我会喜欢你的洞察力。你似乎有一个清晰的认识 - 我不知道！ – technopeasant 2011-03-01 18:48:28

如果你可以更新ID品牌 “the_brand”，那么你可以添加

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

也就是说，更换ID中带下划线的空格将其选中。如果这不是一种选择，你只是想一直使用的最后一个字，这样做：

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

此正则表达式将取代一切到最后一个空间留下的最后一个字（与该品牌进行测试）

来源

2011-03-01 05:32:31

我可以想到的两种方法：

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下面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); 
});

来源

2011-03-01 05:33:33 Chandu

尝试类似：

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

来源

2011-03-01 05:35:25 Rob

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

回答

相关问题