当点击链接时隐藏其他div与jquery显示一个div当我点击链接

我想创建一个导航方案，有一系列的链接和div的数量。当我点击链接1我想要显示div 1.如果我点击链接2我想隐藏1并显示2等。当点击链接时隐藏其他div与jquery显示一个div当我点击链接

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

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

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'); 
});

来源

2013-02-03 Rob

你正在寻找的功能被称为'accordian'。你可以尝试搜索相同的jquery插件。 –

$('a')目标每<a>标签，你需要更具体的选择：

$("#navigation a');

来源

2013-02-03 14:02:43 charlietfl

谢谢，当然这将工作。我想我看得太久了，看不到明显的。再次感谢您的帮助。 – Rob

$("#navigation a").on(...

这就是它真的那么点击事件仅绑定您的导航链接;你的代码是这个事件绑定到它会在文档正文找到，所以你只需要一个更精确的选择

NB所有链接：你应该委派页

来源

2013-02-03 14:02:27 mikakun

感谢您的快速响应。 – Rob

试试这个

http://jsfiddle.net/6QJJp/1/

我想这是你需要的东西

你需要根据你的需求修复CSS。

来源

2013-02-03 14:09:05 Ankit

例子：http://jsfiddle.net/9UPQj/

<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" rel="1"><img src="images/templates/thumbs/property84.jpg" width="143" height="194" />1st</div> 
    <div id="openhouse" class="span-18 last" rel="2"><img src="images/templates/thumbs/property84.jpg" width="143" height="194" />2nd</div> 
    <div id="Postcards" class="span-18 last" rel="3"><img src="images/templates/thumbs/property84.jpg" width="143" height="194" />3rd</div> 
    <div id="Mortgage" class="span-18 last" rel="4"><img src="images/templates/thumbs/property84.jpg" width="143" height="194" />4th</div>

JS：

$('#navigation a').on('click', function(e) { 
    e.preventDefault(); 
    var index = $('a').index(this) + 1; 

    $('div').each(function(){ 

     if($(this).attr('rel') == index){ 
      $(this).addClass('active'); 
      $(this).show(); 
     }else{ 
      $(this).removeClass('active'); 
      $(this).hide(); 
     } 
    }); 

});

来源

2013-02-03 14:18:04 mallix

当点击链接时隐藏其他div与jquery显示一个div当我点击链接

回答

相关问题