点击链接时，显示一个div，同时用jquery隐藏其他div [英] Show one div while hiding other divs with jquery when clicking on links

问题描述

我正在尝试创建一个包含一系列链接和div数量的导航方案。当我点击链接1时，我想显示div 1.如果我点击链接2，我想隐藏1并显示2等。

我能够获得以下代码工作。但是，发生的情况是当页面上的任何其他链接被点击时，当前正在显示的div消失/隐藏。

我尝试了各种解决方案，但一直无法弄清楚。有人可以根据下面的代码提供一些有关可能发生的事情的见解。

HTML：

 < ul id =navigation> ; 
 
< li data-tab =openhouseclass =settingLink>< a href =＃> Open House Flyers< / a>< / li> 
< li data-tab =postcardsclass =settingLink>< a href =＃>明信片< / a>< / li> 
< li data-tab =mortgageclass =settingLink>< a href =＃> Mortgage Flyers< / a>< / li> 
< li data-tab =recruitingclass =settingLink>< a href =＃>招聘传单< / a>< / li> 
< / ul> 
 
 
< div id =propertyclass =span-18 last>< img src =images / templates / thumbs / property84.jpgwidth =143 height =194/>< / div> 
< div id =openhouseclass =span-18 last>< img src =images / templates / thumbs / property84.jpgwidth =143height =194/> ;< / DIV> 
< div id =Postcardsclass =span-18 last>< img src =images / templates / thumbs / property84.jpgwidth =143height =194/> ;< / DIV> 
< div id =Mortgageclass =span-18 last>< img src =images / templates / thumbs / property84.jpgwidth =143height =194/> ;< / DIV> 
< div id =Recruitingclass =span-18 last>< img src =images / templates / thumbs / property84.jpgwidth =143height =194/> ;< / DIV> 
  

JavaScript：

 < $（$'$'）$（'a'）。on（'click'，function（e）{
 e.preventDefault（）; 
 var $ li = $（this）.closest（'li '）; 
 
 var tab = $ li.data（'tab'）; 
 var current = $（'。active.settingLink'）。data（'tab'）; 
 
 $（'＃'+ current）.fadeOut（'fast'，function（）{
 //向下滑动新的div 
 $（'＃'+ tab）.fadeIn （）; 
}）; 
 
 //从当前链接中删除活动类
 $（'。active.settingLink'）。removeClass（'active'）; 
 
 $ li.addClass（'active'）; 
}）; 
  

解决方案

$（'a' ）以页面中的每个< a> 标记为目标，您需要更具体的选择器：

  $（＃navigation a'）; 
  

I am trying to create a navigation scheme that has a series of links and number of divs. When I click on link 1 I want to show div 1. If I click on link 2 I want to hide 1 and show 2 etc.

I was able to get the following code to work. However, what is happening is when any other link on the page is clicked the div that is currently being displayed disappears/hides.

I have tried various solutions but have been unable to figure this out. Can someone provide some insights to what may be happening based on the code below.

HTML:

    <ul id="navigation">
        <li data-tab="property" class="activeitem settingLink active"><a href="#">Property Flyers</a></li>
        <li data-tab="openhouse" class="settingLink"><a href="#">Open House Flyers</a></li>
        <li data-tab="postcards" class="settingLink"><a href="#">Postcards</a></li>
        <li data-tab="mortgage" class="settingLink"><a href="#">Mortgage Flyers</a></li>
        <li data-tab="recruiting" class="settingLink"><a href="#">Recruiting Flyers</a></li>
    </ul>


    <div id="property" class="span-18 last"><img src="images/templates/thumbs/property84.jpg" width="143" height="194" /></div>
    <div id="openhouse" class="span-18 last"><img src="images/templates/thumbs/property84.jpg" width="143" height="194" /></div>
    <div id="Postcards" class="span-18 last"><img src="images/templates/thumbs/property84.jpg" width="143" height="194" /></div>
    <div id="Mortgage" class="span-18 last"><img src="images/templates/thumbs/property84.jpg" width="143" height="194" /></div>
    <div id="Recruiting" class="span-18 last"><img src="images/templates/thumbs/property84.jpg" width="143" height="194" /></div>

JavaScript:

$('a').on('click', function(e) {
    e.preventDefault();
    var $li = $(this).closest('li');

    var tab = $li.data('tab');
    var current = $('.active.settingLink').data('tab');

    $('#' + current).fadeOut('fast', function() {
        //Slide the new div down
        $('#' + tab).fadeIn();
    });

    //Remove active class from current link
    $('.active.settingLink').removeClass('active');

    $li.addClass('active');
});

解决方案

$('a') targets every <a> tag in page, you need more specific selector:

$("#navigation a');

这篇关于点击链接时，显示一个div，同时用jquery隐藏其他div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！