CODEWITHSUNDEEP
jqueryhtmltabs
Brained Washed
Brained Washed

Reputation: 703

How can I fix tabs not showing in my page?

Jquery starter here my problem is that every time I click the Home,About,Contact and Login the tabs won't display, How can I fix this? Any ideas how can I fix this would be a big help for me. Thanks you.

//lines of my code

    <!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>trial</title>
    <link rel="stylesheet" href="css/reset.css" type="text/css">
    <link rel="stylesheet" href="css/style.css" type="text/css">
    <script src="http://code.jquery.com/jquery-1.8.1.js"></script>
    <script>
        $(function () {
            var tabContainers = $('section.tabs > article');
            tabContainers.hide().filter(':home').show();

            $('section.tabs ul.tabsNav a').click(function () {
                tabContainers.hide();
                tabContainers.filter(this.hash).show();
                $('section.tabs ul.tabsNav a').removeClass('selected');
                $(this).addClass('selected');
                return false;
            }).filter(':home').click();
        });
    </script>
</head>
<body>
<div id="siteWrapper">
    <header id="siteHead">
        <h1>Header</h1>
    </header>   
    <nav id="siteNav">
        <h1>Navigation</h1>
        <ul class="tabsNav">
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="log"><a href="#login">Log In</a></li>
        </ul>
    </nav>
    <section id="siteContent" class="tabs">
        <h1>Section</h1>
        <article id="home">
            <h2>Home</h2>
            </article>
        <article id="about">
            <h2>About</h2>
        </article>
        <article id="contact">
            <h2>Contact</h2>
        </article>
        <article id="login">
            <h2>Login</h2>
        </article>
    </section>
    <footer id="siteFooter">
        <h1>Footer</h1>
    </footer>
</div>
</body>
</html>

Upvotes: 0

Views: 98

Answers (1)

DaveR
DaveR

Reputation: 2483

Here's a working fiddle. Let me know if that is what you want.

http://jsfiddle.net/Y6STE/1/

Upvotes: 1

Related Questions