скрыть и показать div нажмите на кнопку

я хочу скрыть идентификатор, когда я нажимаю на href, поэтому его один и тот же идентификатор показывает, и другой идентификатор автоматически закрывается

пример :

<div id="fit" class="heading">FIT</div> <a href="#er">first</a> <div id="er" style="display:none;">aksdjfhaskdj hskj hskjfh sd fghjgfdjf gdsjfdg jdfgjdf gjgdfjgfdjf gasdkjfasjfghsdj </div> <a href="#erp">erp</a> <div id="erp" style="display:none;">erp </div> <div id="style" class="heading">style</div> 

и скрипт:

 <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script> <script> $(document).ready(function(e) { $("a").click(function(e) { var ab = $(this).attr("href"); //alert(ab); //$("div").hide(); $(ab).show(); }); }); </script> 

в классе использования html для связанного с привязкой div

 <div id="fit" class="heading">FIT</div> <a href="#er">first</a> <div id="er" style="display:none;" class="anchorrel">aksdjfhaskdj hskj hskjfh sd fghjgfdjf gdsjfdg jdfgjdf gjgdfjgfdjf gasdkjfasjfghsdj </div> <a href="#erp">erp</a> <div id="erp" style="display:none;" class="anchorrel">erp </div> <div id="style" class="heading">style</div> <script> $(document).ready(function(e) { $("a").click(function(e) { e.preventDefault(); var ab = $(this).attr("href"); //alert(ab); $(".anchorrel").hide();// all div related to .anchorrel hide $(ab).show(); }); }); </script> 

см. демо

Вы можете сделать это:

 $(document).ready(function (e) { // Cache the anchor tag here var $link = $('a'); // Click event handler for the link $link.click(function (e) { // prevent the default action of the anchor e.preventDefault(); var id = this.href; // Hide all the visible divs next to all the anchors $link.next('div:visible').hide(); // Show the current div with id $(id).show(); }); }); 

Если вы не закроете все остальные div и покажете только div с идентификатором, который соответствует href тега, нажмите, а используйте следующее:

 $("a").click(function(e) { var ab = $(this).attr("href"); $('div').hide(); $(ab).show(); }); 

Я не знаю, почему вы прокомментируете это в первую очередь, может быть, я не понимаю, чего вы не достигнете.

Вот скрипка: http://jsfiddle.net/25RZR/

скрипка

JavaScript

 $(document).ready(function(e) { $("a").click(function(e) { var ab = $(this).attr("href"); $('.content').hide(); $(ab).show(); }); }); 

HTML

 <div id="fit" class="heading">FIT</div> <a href="#er">first</a> <div id="er" class="content hide">aksdjfhaskdj hskj hskjfh sd fghjgfdjf gdsjfdg jdfgjdf gjgdfjgfdjf gasdkjfasjfghsdj </div> <a href="#erp">erp</a> <div id="erp" class="content hide">erp </div> <div id="style" class="heading">style</div> 

Ну, вы можете сделать так:

 $(document).ready(function(e) { $("a").click(function (e) { e.preventDefault; // <------------stop the default behavior var ab = $(this).attr('href'); // <------better to use in terms of performance $(ab).show().siblings('div:not(.heading)').hide(); }); }); и $(document).ready(function(e) { $("a").click(function (e) { e.preventDefault; // <------------stop the default behavior var ab = $(this).attr('href'); // <------better to use in terms of performance $(ab).show().siblings('div:not(.heading)').hide(); }); }); 

Демонстрация в действии