문제

I'm making a "tabbed navigation" type of page, where the "home" "about" "links" etc. pages are actually hidden spans that show when the corresponding "a img" is clicked. At that time all other pages are to hide()

The "home" page is the main splash page, so if you click "about", the "about" page will show up (hiding the "home" page or whichever one was open), and clicking "about" again will .hide() the "about" span and return to the "home" span.

The main issue is occurring either randomly, or after a full pass through each link, where instead of hiding the "home" span, it's keeping that span open, and opening the clicked span underneath the "home" span.

I can't figure out what's causing this.

HTML

<div id="container">
<div id="navigation">   <a href="#" class="homeImg">One</a>
<a href="#" class="aboutImg">Two</a>
<a href="#" class="hireImg">Three</a>
<a href="#" class="workImg">Four</a>
<a href="#" class="linksImg">Five</a>

</div>
<div id="content">
<span class="startingContent" id="navContent">
            <h1>This is the splash page</h1>
            <h2>This should dissapear when another link is clicked</h2>
            <h3>Reappear when no other links are open</h3>
</span>

<span class="aboutContent" id="navContent">
            <h1>Random Text</h1>
            <p>Random Text</p>
    </span>
<span class="hireContent" id="navContent">
            <h1>Random Text</h1>
            <p>Random Text</p>
    </span>
<span class="workContent" id="navContent">
            <h1>Random Text</h1>
            <p>Random Text</p>
    </span>
<span class="linksContent" id="navContent">
            <h1>Random Text</h1>
            <p>Random Text</p>
    </span>

    </div>
</div>

jquery

$(document).ready(function () {
$('.aboutContent, .hireContent, .workContent, .linksContent, ').hide(function () {
$('.aboutImg').click(function () {
$('.startingContent,  .hireContent, .workContent, .linksContent').hide(function   () {
            $('.aboutContent').show(function () {
                $('.aboutImg').click(function () {
                    $('.aboutContent').hide(function () {
                        $('.startingContent').show();
                    });
                });
            });
        });
    });
});
});

$(document).ready(function () {
$('.aboutContent, .hireContent, .workContent, .linksContent, ').hide(function () {
    $('.hireImg').click(function () {
 $('.startingContent, .aboutContent, .workContent, .linksContent').hide(function   () {
            $('.hireContent').show(function () {
                $('.hireImg').click(function () {
                    $('.hireContent').hide(function () {
                        $('.startingContent').show();
                    });
                });
            });
        });
    });
});
});

$(document).ready(function () {
$('.aboutContent, .hireContent, .workContent, .linksContent,').hide(function () {
    $('.workImg').click(function () {
$('.startingContent, .aboutContent, .hireContent, .linksContent').hide(function () {
            $('.workContent').show(function () {
                $('.workImg').click(function () {
                    $('.workContent').hide(function () {
                        $('.startingContent').show();
                    });
                });
            });
        });
    });
});
 });

 $(document).ready(function () {
 $('.aboutContent, .hireContent, .workContent, .linksContent,').hide(function () {
    $('.linksImg').click(function () {
 $('.startingContent, .aboutContent, .hireContent, .workContent,').hide(function () {
            $('.linksContent').show(function () {
                $('.linksImg').click(function () {
                    $('.linksContent').hide(function () {
                        $('.startingContent').show();
                    });
                });
            });
        });
    });
});
});



$(document).ready(function () {
$('.aboutContent, .hireContent, .workContent, .linksContent, ').hide(function () {
    $('.homeImg').click(function () {
   $(' .aboutContent, .hireContent, .workContent, .linksContent').hide(function () {
            $('.startingContent').show();
        });
    });
});
 });

CSS

body {
background-color: #403C29;
margin: 0, auto;
padding: 0;
color: white;
}
#container {
position:absolute;
left: 50%;
width:960px;
margin-left:-480px;
}
#navContent {
width: 960px;
height: 600px;
background-color: #403C29;
}
#navigation {
text-align: center;
}

http://jsfiddle.net/alanh13/YpXbn/2/ (the demo doesn't work for some reason, works in a browser though)

도움이 되었습니까?

해결책

Also, you cannot have elements with the same ID. That is what classes are for. The id attribute is intentionally made for it to be unique.

Here's a refined version of what you should do: http://jsfiddle.net/TRTxB/1/

How about trying this... I'm sure you could easily apply this concept. Which is storing the ID of the div you want to show in a custom selector for a given element.

<div class="container">
    <div class="nav">
        <a content="aDiv" class="navBtn">A</a>
        <a content="bDiv" class="navBtn">B</a>
        <a content="cDiv" class="navBtn">C</a>
    </div>
</div>
<div id="aDiv" class="data">
    A div
</div>
<div id="bDiv" class="data">
    B div
</div>
<div id="cDiv" class="data">
    C div
</div>

JS:

 $(document).ready(function(){

    $('.navBtn').click(function(event){

        var contentSelector = $(this).attr('content');
        $('.data').hide();
        $("#"+contentSelector).show();
    });

});

Here's a JS Fiddle: http://jsfiddle.net/52CQA/

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top