1

我的代码设置为在单击正确的导航按钮时显示面板，如果再次单击或激活另一个按钮则隐藏。例如：如果你点击“bio”按钮，bio 面板应该会弹出。如果再次单击它，它就会消失。但是，如果你有生物面板并且你想显示商店面板，生物面板将消失并显示商店面板。此代码在 IE 和 Chrome 中完美运行，但在 FireFox 中不起作用。请记住，我对此完全陌生，并且自学如何编写代码。

我正在使用的 jQuery 代码如下：

$(document).ready(function(){
    $(".bio").click(function(){
        $(".panel").not(".biopanel").hide();
        $(".biopanel").toggle("fast");
        });

    $(".blog").click(function(){
        $(".panel").not(".blogpanel").hide();
        $(".blogpanel").toggle("fast");
        });

    $(".credits").click(function(){
        $(".panel").not(".creditspanel").hide();
        $(".creditspanel").toggle("fast");
        });

    $(".store").click(function(){
        $(".panel").not(".storepanel").hide();
        $(".storepanel").toggle("fast");
        });

    $(".contact").click(function(){
        $(".panel").not(".contactpanel").hide();
        $(".contactpanel").toggle("fast");
        });

    $(".casual").click(function(){
        $(".panel").not(".casualpanel").hide();
        $(".casualpanel").toggle("fast");
        });

    $(".glamour").click(function(){
        $(".panel").not(".glamourpanel").hide();
        $(".glamourpanel").toggle("fast");
        });

    $(".tears").click(function(){
        $(".panel").not(".tearspanel").hide();
        $(".tearspanel").toggle("fast");
        });
});


<!DOCTYPE HTML>
<!--[if lt IE 7 ]> <html lang="en" class="ie ie6"> <![endif]--> 
<!--[if IE 7 ]>    <html lang="en" class="ie ie7"> <![endif]--> 
<!--[if IE 8 ]>    <html lang="en" class="ie ie8"> <![endif]--> 
<!--[if IE 9 ]>    <html lang="en" class="ie ie9"> <![endif]--> 
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <title>Demo</title>
    <meta name="description" content="Demo Page">
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
    <script type="text/javascript" src="js/simplifiedjs.js"></script>
</head>

<body>
    <div id="nav_wrapper">        
        <nav id="navigation" class="navigation">
            <ul>
            <li><a class="bio" href="#">Bio</a></li>
            <li><a class="blog" href="#">Blog</a></li>
            <li><a class="credits" href="#">Credits</a></li>
            <li><a href="#">Gallery</a>
                <ul class="submenu"  >
                    <li><a class="casual" href="#">Casual</a></li>
                    <li><a class="glamour" href="#">Glamour</a></li>
                    <li><a class="tears" href="#">Tears</a></li>
                </ul>
            </li>
            <li><a class="store" href="#">Store</a></li>
            <li><a class="contact" href="#">Contact</a></li>
        </ul>
    </nav>


    <!-- START OF BIO PANEL -->
    <div class="biopanel panel"> 
        <h2>The Bio</h2>
            <p>Phasellus vitae tempor eros. Integer pulvinar sem justo. Nulla lobortis nisl eu tellus ultricies eget elementum eros pellentesque. Cras at arcu ut nulla consectetur sollicitudin.</p> 
        <div style="clear:both;"></div> 
    </div> 
    <!-- END OF BIO PANEL -->


    <!-- START OF BLOG PANEL -->
    <div class="blogpanel panel">
        <h2>My Blog & Updates</h2>
            <h3>Oct 15th, 2012</h3>
                <p>Phasellus vitae tempor eros. Integer pulvinar sem justo. Nulla lobortis nisl eu tellus ultricies eget elementum eros pellentesque. Cras at arcu ut nulla consectetur sollicitudin.</p>
                <div class="border"></div>
            <h3>Oct 14th, 2012</h3>
                <p>Phasellus vitae tempor eros. Integer pulvinar sem justo. Nulla lobortis nisl eu tellus ultricies eget elementum eros pellentesque. Cras at arcu ut nulla consectetur sollicitudin.</p>
    </div>
    <!-- END OF BLOG PANEL -->


    <!-- START OF CREDITS PANEL -->
    <div class="creditspanel panel">
        <h2>Resume & Credits</h2>
            <div class="creditsscroll">
            <h3>Print</h3>
                <p>Phasellus vitae tempor eros. Integer pulvinar sem justo. Nulla lobortis nisl eu tellus ultricies eget elementum eros pellentesque. Cras at arcu ut nulla consectetur sollicitudin.</p>
                    <div class="border"></div>
            <h3>Online</h3>
                <p>Phasellus vitae tempor eros. Integer pulvinar sem justo. Nulla lobortis nisl eu tellus ultricies eget elementum eros pellentesque. Cras at arcu ut nulla consectetur sollicitudin.</p>
                    <div class="border"></div>
            <h3>Promotions</h3>
                <p>Phasellus vitae tempor eros. Integer pulvinar sem justo. Nulla lobortis nisl eu tellus ultricies eget elementum eros pellentesque. Cras at arcu ut nulla consectetur sollicitudin.</p>
                    <div class="border"></div>
            <h3>Contests & Titles</h3>
                <p>Phasellus vitae tempor eros. Integer pulvinar sem justo. Nulla lobortis nisl eu tellus ultricies eget elementum eros pellentesque. Cras at arcu ut nulla consectetur sollicitudin.</p>
                    <div class="border"></div>
            </div>
    </div>
    <!-- END OF CREDITS PANEL -->

    <!-- START OF GLAMOUR SHEETS -->
    <div class="casualpanel panel">
        <h2>Casual</h2>
            <ul class="casualimgs">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
    </div>

    <div class="glamourpanel panel">
        <h2>Glamour</h2>
            <ul class="glamourimgs">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
    </div>

    <div class="tearspanel panel">
        <h2>Tears</h2>
            <ul class="tearsimgs">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
    </div>
    <!-- END OF GLAMOUR SHEETS -->


    <!-- START OF STORE PANEL -->
    <div class="storepanel panel">
        <h2>The Store</h2>
            <div class="leftcolumn">
                <h3></h3>
                    <p>This is the store panel. It will contain future information about items that may be for purchase.</p>
            </div>

            <div class="rightcolumn">
                <h3></h3>
                    <img src="images/poster.jpg" class="posterimg"><br><br>
                    <p align="center">Subtitle Information</p>
                    <form action="https://www.paypal.com/cgi-bin/webscr" method="post" class="paypalbutton">
                    <input type="hidden" name="cmd" value="_s-xclick">
                    <input type="hidden" name="hosted_button_id" value="9DNX38DGJ9LDQ">
                    <input type="image" src="#" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
                    <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
                    </form>
            </div>
    </div>
    <!-- END OF STORE PANEL -->


    <!-- START OF CONTACT PANEL -->   
    <div class="contactpanel panel">
        <div id="contact-form" class="clearfix">
            <h1>Get In Touch!</h1>
            <p>Do you have questions, comments, or suggestions? Send me a message! I love to hear from people, and I read every message personally.<br>In the event that my form isn't functioning, please contact me directly at ---</p>
            <ul id="errors" class="">
                <li id="info">There were some problems with your form submission:</li>
            </ul>
            <p id="success">Thanks for your message! I can't wait to hear from you.</p>
            <form method="POST" action="process.php">
                <label for="name">Name: <span class="required">*</span></label>
                <input type="text" id="name" name="name" value="" placeholder="John Doe" required="required" autofocus="autofocus" />
                <label for="email">Email Address: <span class="required">*</span></label>
                <input type="email" id="email" name="email" value="" placeholder="johndoe@example.com" required="required" />
                <label for="subject">Subject: </label>
                <input type="text" id="subject" name="subject" value="" />
                <label for="message">Message: <span class="required">*</span></label>
                <textarea id="message" name="message" placeholder="Your message must be greater than 20 charcters" required="required" data-minlength="20"></textarea>
                <span id="loading"></span>
                <input type="submit" value="Submit!" id="submit-button" />
                <p id="req-field-desc"><span class="required">*</span> indicates a required field</p>
            </form>
        </div>
    </div>
    <!-- END OF CONTACT PANEL -->

</div>

4

1 回答 1

1

首先，.panel向所有面板添加一个类，如下所示：

<div class="biopanel panel"></div>
<div class="blogpanel panel"></div>
...

然后你可以这样做：

$('.bio').click(function(){
    $(".panel").not(".biopanel").hide();
    $(".biopanel").show();
});
...

JSFIDDLE

尚未测试，但它应该可以工作。您还可以将切换功能用作事件。

$('.bio').toggle(function(){
   //First click
   //Do some stuff
}, function(){
   //Second click
   //Do other stuff
});

这个甚至在 javascript 被禁用时也可以工作： 一个更短的版本

于 2012-12-08T00:52:42.767 回答