单击链接时显示/隐藏div

我试图在单击链接时显示并隐藏div。我得到了正确显示的div，但我希望该div可以消失，当我点击另一个。这是我目前的代码。单击链接时显示/隐藏div

<script type="text/javascript"> 
      $(function() { 
       $('#attach_silver').click(function() { 
        $('#sec_silver').show(); 
        return false; 
       });   
      }); 

      $(function() { 
       $('#attach_gold').click(function() { 
        $('#sec_gold').show(); 
        return false; 
       });   
      }); 

      $(function() { 
       $('#attach_platinum').click(function() { 
        $('#sec_platinum').show(); 
        return false; 
       });   
      }); 
     </script> 

<a href="#" id="attach_silver">Silver</a> 
    <a href="#" id="attach_gold">Gold</a> 
    <a href="#" id="attach_platinum">Platinum</a> 

<div id="sec_silver" style="display: none;"> 
     Hello world!! Silver    
    </div> 

    <div id="sec_gold" style="display: none;"> 
     Hello world!! Gold    
    </div> 

    <div id="sec_platinum" style="display: none;"> 
     Hello world!! Platinum    
    </div>

来源

2013-10-24 user2916637

，什么是阻止你正是这样做？另外，您实际上不需要三个'document.ready'事件处理程序，只需要一个，并将在'document.ready'上运行的所有代码放入该事件处理程序中。 – Jasper

尝试添加类

<div id="sec_silver" style="display: none;" class="divclass"> 
    Hello world!! Silver    
</div> 

<div id="sec_gold" style="display: none;" class="divclass"> 
    Hello world!! Gold    
</div> 

<div id="sec_platinum" style="display: none;" class="divclass"> 
    Hello world!! Platinum    
</div>

这个代码的jQuery

 $(function() { 
       $('#attach_silver').click(function() { 
        $('.divclass').hide(); 
        $('#sec_silver').show(); 
        return false; 
       });   
      }); 

      $(function() { 
       $('#attach_gold').click(function() { 
        $('.divclass').hide(); 
        $('#sec_gold').show(); 
        return false; 
       });   
      }); 

      $(function() { 
       $('#attach_platinum').click(function() { 
        $('.divclass').hide(); 
        $('#sec_platinum').show(); 
        return false; 
       });   
      });

在此模式后，你躲上的click事件的所有DIV，并显示DIV你想要

来源

2013-10-24 16:10:00

您的点击事件当前显示相关的div，您只需要它们隐藏其他div。

来源

2013-10-24 16:10:18 hiattp

使用^ attribute-starts with selector

$('div[id^="sec_"]').hide(); // will hide all the div with id starting with sec_

你的代码变得

$(function() { 
    $('#attach_silver').click(function() { 
     $('div[id^="sec_"]').hide();// add here 
     $('#sec_silver').show(); 
     return false; 
    }); 
    $('#attach_gold').click(function() { 
     $('div[id^="sec_"]').hide();// add here 
     $('#sec_gold').show(); 
     return false; 
    }); 
    $('#attach_platinum').click(function() { 
     $('div[id^="sec_"]').hide();// add here 
     $('#sec_platinum').show(); 
     return false; 
    }); 
});

来源

2013-10-24 16:12:11

你只是让其他div的，你从来没有告诉他们隐藏：

<script type="text/javascript"> 
$(function() { 
    $('#attach_silver').click(function() { 
     console.log('sliver click'); 
     $('#sec_silver').show(); 
     $('#sec_gold').hide(); 
     $('#sec_platinum').hide(); 
     return false; 
    }); 
}); 

$(function() { 
    $('#attach_gold').click(function() { 
     $('#sec_gold').show(); 
     $('#sec_silver').hide(); 
     $('#sec_platinum').hide(); 
     return false; 
    }); 
}); 

$(function() { 
    $('#attach_platinum').click(function() { 
     $('#sec_platinum').show(); 
     $('#sec_gold').hide(); 
     $('#sec_silver').hide(); 
     return false; 
    }); 
}); 
</script>

来源

2013-10-24 16:14:11

如何两线解决方案

$('a').click(function() { 
    $('div:contains('+$(this).text()+')').show(); 
    $('div:not(:contains('+$(this).text()+'))').hide(); 
});

Live Demo

来源

2013-10-24 16:36:30 Rex

我喜欢的ID /类模式。另外，通过添加一个类，您可以删除该内联样式。地址：

.divclass{ 
    display: none 
}

来源

2013-10-24 17:13:48

使用JavaScript做到这一点：

<a href="#xyz" onclick="hideDiv();">Hide Div</a>

function hideDiv() 
{ 
document.getElementById('myContainerDiv').style.display = "none"; 
}

来源

2015-07-28 10:09:20 Zoran777

单击链接时显示/隐藏div

回答

相关问题