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来填充。

所以，我的问题是这样的：我如何根据他们使用js或jquery动态点击哪个链接来填充所有div和代码以显示/隐藏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，并专门抓取has标记后的字符。这样做是测试页面是否已经改变，以防最终用户按下后退按钮。如果是这样，它会自动将页面更新为显示正确的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

需要帮助简化代码

3 个答案: