單擊li元素時使用JQuery進行FadeIn

Question

我不明白為什么我的代碼無法正常工作：

我正在使用PHP在帶有變量$ main的頁面之間進行切換，並且我希望它通過JQuery淡入。 任何人都可以在這里幫助我。

<?php
    if (isset ($_GET['main'])) {
        $main = $_GET['main'];
    } else {
        $main = "forside";
    }
?>
...
<nav class="navigation">
    <div class="parent">
        <ul>
            <li> 
                <a href='?main=forside'> Forside </a>
            </li>
            <li> 
                <a href='?main=omos'> Om os </a>
            </li>
            <li>
                <a href='?main=musikere'> Musikere </a>
            </li>                   
            <li> 
                <a href='?main=galleri'> Galleri </a>
            </li>
            <li>
                <a href='?main=kontakt'> Kontakt </a>
            </li>
        </ul>
    </div>
</nav>
...
<div class="dynamicDiv">
    <?php include
        'case.php';
    ?>
</div>

因此，我想做的是選擇鏈接a，然后在dynamicDiv div中淡入每個主題的新內容。

現在，我正在嘗試使用以下JQuery代碼：

<script>
    $(document).ready(function(){
        $(".parent ul li a").click(function(){
            $(".dynamicDiv").hide();
            $(".dynamicDiv").fadeIn(1000);
        });
    });
</script>

有人可以在這里幫助我嗎（：

更新：這是case.php文件：

<?php
    switch ($main) {
        case 'forside': 
            include 'forside.php'; 
        break;
        case 'omos': 
            include 'omos.php';
        break;
        case 'musikere':
            include 'musikere.php';
        break;
        case 'galleri':
            include 'galleri.php';
        break;
        case 'kontakt':
            include 'kontakt.php';
        break;
        default: 
            include 'forside.php';
        break;
    }
?>

Answer 1

使用event.preventDefault()並為了在div內部動態更改文本，請嘗試以下操作：

$(document).ready(function(){
     $(".parent ul li a").click(function(event){
         event.preventDefault();   //Prevent Page from redirecting.
         $(".dynamicDiv").text($(this).text());
         $(".dynamicDiv").hide();
         $(".dynamicDiv").fadeIn(1000);
     });
 });

工作演示

Answer 2

我建議您采用其他方法，因為您有指向某些鏈接的鏈接位於同一頁面上。

您可以使用ajax $ post運行PHP腳本以回顯想要淡入的HTML。

這是一個基本的演示

http://jsfiddle.net/xfhg80mp/

的HTML

<nav class="navigation">
    <div class="parent">
        <ul>
            <li data-id="forside"> 
                <a href="#"> Forside </a>
            </li>
            <li data-id="omos"> 
                <a href='#'> Om os </a>
            </li>
            <li data-id="musikere">
                <a href='#'> Musikere </a>
            </li>                   
            <li data-id="galleri"> 
                <a href='#'> Galleri </a>
            </li>
            <li data-id="kontakt">
                <a href='#'> Kontakt </a>
            </li>
        </ul>
    </div>
</nav>

jQuery的

      $(document).ready(function(){
                $(".parent ul").on('click', '>li', function(){

                 $(".dynamicDiv").hide();

                 $( ".dynamicDiv" ).empty();

                 var id  = $(this).closest("li").attr('data-id'); 


    /// using post to your PHP file, (echo the data) you may need to change your PHP files to echo the data at the end of it. example down below

    if (id == "forside") {

    $.post( "forside.php", function( data ) {

         $( ".dynamicDiv" ).html( data );

         $(".dynamicDiv").fadeIn(1000);
    });

    }

    /// do the same for all your other choices like above eg omos, musikere


 });


            });

以您的PHP文件中的 forside.php為例

<?php

$data = "Hello this is the new Information i like to show";

echo $data;

?>

並刪除dynamicDiv中的內容，並像這樣

<div class="dynamicDiv">

</div>

<?php

$data = "<h1>Hello this is the new Information i like to show</h1><br><img height='100' width='100' src='dfd.jpg' >";

echo $data;

?>

Answer 3

我想你想做這樣的事情

JS小提琴

    $('nav a').on('click', function (e) {
        e.preventDefault();
        b = $(this).attr('href')
        //console.log(b)
        var a = myFunction(b)
        $(".dynamicDiv").hide();
        $('.dynamicDiv').html(a);
        $(".dynamicDiv").fadeIn(1000);
    });

    function myFunction(a) {
        switch (a) {
            case 'one':
                day = "Sunday";
                return day;
                break;
            case 'two':
                day = "tuesday";
                return day;
                break;
            case 'three':
                day = "wednesday";
                return day;
                break;

            case 'four':
                day = "thruday";
                return day;
                break;

        }
    }