需要帮助简化代码

Question

好的，我在 Drupal 安装上有一个包含多个 div 的页面。我编写了一个 .js 来测试这些 div 内是否有任何信息

if ($('.accred').length) {
    $('#accred').show();
}
else{
    $('#accred').hide();
}    
if ($('.admin-req').length) {
    $('#admis').show();
}
else{
    $('#admis').hide();
}    
if ($('.career-opp').length) {
    $('#career').show();
}
else{
    $('#career').hide();
}    
if ($('.co-op-diploma').length) {
    $('#co_op').show();
}
else{
    $('#co_op').hide();
}    
if ($('.prog-out').length) {
    $('#outcomes').show();
}
else{
    $('#outcomes').hide();
}    
if ($('.prog-struc').length) {
    $('#struc').show();
}
else{
    $('#struc').hide();
}    
if ($('.testimonials').length) {
    $('#testimon').show();
}
else{
    $('#testimon').hide();
}    
if ($('.transfer').length) {
    $('#transfer').show();
}
else{
    $('#transfer').hide();
}   
if ($('.tuition').length) {
    $('#tuition').show();
}
else{
    $('#tuition').hide();
}   

可以隐藏或显示链接，这些链接允许您单击并显示有关每个 div 的更多信息，因为除了一个 div 之外的每个 div 默认情况下都是隐藏的：

$(function(){
  $('#descrip').click(function(){
     $('.prog-descrip').show();
     $('.accred').hide(); 
     $('.admin-req').hide();
     $('.career-opp').hide(); 
     $('.co-op-diploma').hide(); 
     $('.prog-out').hide(); 
     $('.prog-struc').hide(); 
     $('.testimonials').hide(); 
     $('.transfer').hide(); 
     $('.tuition').hide(); 
  });
  $('#accred').click(function(){
     $('.prog-descrip').hide();
     $('.accred').show(); 
     $('.admin-req').hide();
 $('.career-opp').hide(); 
     $('.co-op-diploma').hide(); 
     $('.prog-out').hide(); 
     $('.prog-struc').hide(); 
     $('.testimonials').hide(); 
     $('.transfer').hide(); 
     $('.tuition').hide(); 
  });
  $('#admis').click(function(){
     $('.prog-descrip').hide();
     $('.accred').hide(); 
     $('.admin-req').show();
     $('.career-opp').hide(); 
     $('.co-op-diploma').hide(); 
     $('.prog-out').hide(); 
     $('.prog-struc').hide(); 
     $('.testimonials').hide(); 
     $('.transfer').hide(); 
     $('.tuition').hide(); 
  });
  $('#career').click(function(){
     $('.prog-descrip').hide();
     $('.accred').hide(); 
     $('.admin-req').hide();
     $('.career-opp').show(); 
     $('.co-op-diploma').hide(); 
     $('.prog-out').hide(); 
     $('.prog-struc').hide(); 
     $('.testimonials').hide(); 
     $('.transfer').hide(); 
     $('.tuition').hide(); 
  });
  $('#co_op').click(function(){
     $('.prog-descrip').hide();
     $('.accred').hide(); 
     $('.admin-req').hide();
     $('.career-opp').hide(); 
     $('.co-op-diploma').show(); 
     $('.prog-out').hide(); 
     $('.prog-struc').hide(); 
     $('.testimonials').hide(); 
     $('.transfer').hide(); 
     $('.tuition').hide(); 
  });
  $('#outcomes').click(function(){
     $('.prog-descrip').hide();
     $('.accred').hide(); 
     $('.admin-req').hide();
     $('.career-opp').hide(); 
     $('.co-op-diploma').hide(); 
     $('.prog-out').show(); 
     $('.prog-struc').hide(); 
     $('.testimonials').hide(); 
     $('.transfer').hide(); 
     $('.tuition').hide(); 
  });
  $('#struc').click(function(){
     $('.prog-descrip').hide();
     $('.accred').hide(); 
     $('.admin-req').hide();
     $('.career-opp').hide(); 
     $('.co-op-diploma').hide(); 
     $('.prog-out').hide(); 
     $('.prog-struc').show(); 
     $('.testimonials').hide(); 
     $('.transfer').hide(); 
     $('.tuition').hide(); 
  });
  $('#testimon').click(function(){
     $('.prog-descrip').hide();
     $('.accred').hide(); 
     $('.admin-req').hide();
     $('.career-opp').hide(); 
     $('.co-op-diploma').hide(); 
     $('.prog-out').hide(); 
     $('.prog-struc').hide(); 
     $('.testimonials').show(); 
     $('.transfer').hide(); 
     $('.tuition').hide(); 
  });
  $('#transfer').click(function(){
     $('.prog-descrip').hide();
     $('.accred').hide(); 
     $('.admin-req').hide();
     $('.career-opp').hide(); 
     $('.co-op-diploma').hide(); 
     $('.prog-out').hide(); 
     $('.prog-struc').hide(); 
     $('.testimonials').hide(); 
     $('.transfer').show(); 
     $('.tuition').hide(); 
  });
  $('#tuition').click(function(){
     $('.prog-descrip').hide();
     $('.accred').hide(); 
     $('.admin-req').hide();
     $('.career-opp').hide(); 
     $('.co-op-diploma').hide(); 
     $('.prog-out').hide(); 
     $('.prog-struc').hide(); 
     $('.testimonials').hide(); 
     $('.transfer').hide(); 
     $('.tuition').show(); 
  });
});

然而，客户不喜欢这种方式。他想根据是否有更多 div 来填充。

所以，我的问题是：如何填充所有 div 和代码以根据它们使用 js 或 jquery 动态单击的链接来显示/隐藏 div？我不是一个 js 或 jquery 人，所以请原谅我天真的问题，如果它实际上是天真的。谢谢！

编辑

请那些已回复的人重新阅读我的问题。动态填充信息。换句话说，客户端不想要硬编码的 div。

Answer 1

更好的解决方案，只需提供隐藏自己的类所需的所有类并使用 .toggle() 即可。

Answer 2

好的，这就是我最终所做的。我最终为每个链接分配了 linkeddiv 的类，以及内容 div 的名称的 rel ，如下所示：

<a href="#tuition" class="linkeddiv" rel="tuition">Tuition and Fees</a> 
<div class="prog-descrip prog-detail" style="display: none; ">

之后，我设置了一个间隔函数来测试页面的 url，并专门抓取 后面的字符有标记。这样做的目的是测试页面是否已更改，以防最终用户按下后退按钮。如果确实如此，它会自动将页面更新到正确的 div 显示

setInterval(function() {
   // parse the url
   current_url = document.location.href;
   after_hash = current_url.split('#');

   if (after_hash[1] == null) {
       if ($('.prog-descrip').length) {
        $('.prog-detail').hide();
        $('.prog-descrip').show();
        $('#prog_link_block').show();
        $('#Program_Areas-1').hide();
       }
   } else {
       $('.prog-detail').hide();
       $('#Program_Areas-1').hide();
       $('.' + after_hash[1]).show();
   }
}, 100);

一旦完成，我只是测试了他们单击的链接，并基于此，我根据 rel 链接隐藏或显示了 div：

$('.linkeddiv').each(function() {
    contentdiv = $(this).attr('rel');
    if ($('.' + contentdiv).length == 0) {
        $(this).hide();
    }
});
$('.linkeddiv').click(function() {
    $('.prog-detail').hide();
    contentdiv = $(this).attr('rel');
    $('.' + contentdiv).show();
}); 

这正是我所实现的正在寻找。此外，它还添加了使用后退按钮的功能，而不是导致死链接 (#)。

如果你想使用 jquery，你还可以做一些有趣的淡入淡出或滑动。

希望这对某人有帮助。

Answer 3

第二部分可以缩短为：

$('.accred, .admin-req, .career-opp, .co-op-diploma, .prog-out, .prog-struc,
 .testimonials, .transfer, .tuition').hide(); 
//Show the one you want