Question

Jquery在这里启动我的问题是，每次单击Home，About，Contact和Login时都不会显示选项卡，我该如何解决这个问题？任何想法如何解决这个问题对我来说都是一个很大的帮助。谢谢你。

//我的代码行

    <!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>

Answer 1

这是一个工作小提琴。如果这就是你想要的，请告诉我。

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

如何修复未在我的页面中显示的标签？

1 个答案: