Javascript 单击li元素时使用JQuery进行FadeIn

我不明白为什么我的代码不起作用：

我正在使用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分区中为每个主题添加新内容

现在我正在尝试使用以下JQuery代码：

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

有人能帮我吗

更新：下面是case.php-file：

<?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;
    }
?>

使用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);
     });
 });

---

我建议采取另一种方法，因为你有指向同一页面上的一些链接

您可以使用ajax$post运行PHP脚本，以回显希望淡入的HTML

这里是一个基本的演示

HTML

在PHP文件中，作为side.PHP的示例

<?php

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

echo $data;

?>

删除dynamicDiv中的内容，然后像这样

<div class="dynamicDiv">

</div>

---

我想你想做这样的事

<div class="dynamicDiv">

</div>

---

不，这不起作用：$main的值在哪里声明？您必须记住，PHP是服务器端语言，JS是客户端语言。加载页面后，您不能将$main值传递到case.PHP中的PHP函数中，除非您正在执行AJAX。在单击任何a元素之前，.dynamicDiv是否为空？或者它有一些内容？@ABFORCE:在单击任何“a”之前，内容是forside.php文件element@Keblovszki在点击a之前它是可见的吗？我同意这是阻止页面重定向的必要条件，但它不会改变“动态内容”，就像@andrew说的，它阻止页面重定向，但是当点击链接时，dinamicDiv的内容是相同的。但它确实在同一页面上隐藏和淡出：/1如何切换页面和隐藏和淡出：？@Keblovszki…抱歉，我没有理解你的意思…如果页面不重定向，那么隐藏和淡出将只在同一页面上…抱歉，你能再解释一下吗？？？@kartikeya：是的，我能。当我用这个新的默认值点击我的导航菜单时，无论发生什么，内容都是一样的。这有意义吗？@Kartikeya：我想在div元素dynamicDiv中fadeIn给定的父级ul li a的内容。有了你的回答，我只是淡入了每个家长的相同内容。我不知道如何更好地解释它，所以我真的希望我解释得足够好：它会发出警报并打印我的数据id，但是我如何让dynamicDiv中的内容隐藏起来并与新内容一起消失？好吧，那么您正试图发布到同一页面并运行forside.php、、、、等等。这是行不通的。您需要做的是，当您从我的示例中对id进行分级时，运行相关的php脚本，使用ajax回送数据，并将数据放在中，以便淡入。让我尝试更新我的答案，以便更好地解释。我不能为你做一个演示，因为fiddle不喜欢在unsless中直接使用PHP，如果你有一个链接，我没有到我的代码的链接，所以fiddle会很棒。非常感谢您查看我使用ajax发布到PHP并获取信息的更新答案。。我不能让它工作。如果我这样做，不同的网站上就没有任何内容了。

<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;

?>

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

        }
    }