Question

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

我能够获得以下代码。但是，正在发生的事情是当页面上的任何其他链接被点击时，当前正在显示的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');
});

Answer 1

$('a')定位到页面中的每个<a>代码，您需要更具体的选择器：

$("#navigation a');

Answer 2

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

将点击事件仅绑定到您的导航链接真的如此;您的代码将此事件绑定到它将在文档正文中找到的所有链接，因此您只需要一个更精确的选择器

nb：你应该委派

Answer 3

示例：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();
        }
    });

});

Answer 4

试试这个

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

我想这就是你需要的东西

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

单击链接时显示一个div，同时用jquery隐藏其他div

4 个答案: