单击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);
     });
 });

Working Demo

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 Fiddle

    $('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;

        }
    }