1

私のコードは、適切なナビゲーションボタンがクリックされたときにパネルを表示し、再度クリックするか別のボタンをアクティブにすると非表示にするように設定されています。例: [バイオ] ボタンをクリックすると、バイオ パネルが表示されます。もう一度クリックすると消えます。ただし、バイオ パネルをアップしてストア パネルを表示したい場合は、バイオ パネルが消えてストア パネルが表示されます。このコードは 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 に答える