Jquery 如何修复页面中未显示的选项卡？_Jquery_Html_Tabs

Jquery 如何修复页面中未显示的选项卡？

jquery html tabs

Jquery 如何修复页面中未显示的选项卡？,jquery,html,tabs,Jquery,Html,Tabs,jQueryStarter这里我的问题是，每次我单击Home、About、Contact和Login时，选项卡都不会显示，我如何解决这个问题？任何关于如何解决这个问题的想法都会对我大有帮助。谢谢你 //我的代码行 <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <title>trial</title> <lin

jQueryStarter这里我的问题是，每次我单击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>


试验
$（函数（）{
var tabContainers=$（'section.tabs>article'）；
tabContainers.hide（）.filter（':home'）.show（）；
$（'section.tabs ul.tabsNav a'）。单击（函数（）{
tabContainers.hide（）；
tabContainers.filter（this.hash.show（）；
$（'section.tabs ul.tabsNav a'）.removeClass（'selected'）；
$（this.addClass（'selected'）；
返回false；
}).filter（“：home”）。单击（）；
});
标题
航行






部分
家
关于
接触
登录
页脚

这是一把小提琴。如果这是你想要的，请告诉我

首先要解决的是，您在结束标记中有很多id属性，例如，查看联系人。很抱歉，我没有注意到，但我仍然有相同的问题，顺便说一句，谢谢！您想要的是，当您单击选项卡时，它应该显示相应的页面，对吗？如果是这样的话，我可以建议您将一个重建的html标记与javascript一起使用吗？请快速制作一个JSFIDLE，向我们展示您的css也在做什么？这将使帮助您变得更容易。我想显示相应的文章主要问题是您用于onclick函数“section.tabs”的选择器没有指向任何内容。再次感谢您的好意，我只是按照我的代码使用以下链接：是的，所以这里-选择器是（“div.tabs ul.tabNavigation a”），这告诉jQuery在一个ul-with-class-of-tabNavigation中查找带有的锚定标记，该类本身位于一个div中，该div具有一类tab。您要求查找一个包含“选项卡”类的分区，但没有一个！这是这样复制/粘贴代码的危险之一。只要有可能，就编写自己的代码。