javascript - jquery 菜单淡入淡出部分

Question

我正在尝试使用 jquery 从菜单中导航。 我的页面目前显示 1 个部分，所有页面包含 3 个部分。我想在点击菜单部分淡出当前部分并加载点击部分后。

我的代码如下:

       <nav class="navbar navbar-static-top top_menu  ">
            <ul class="nav navbar-nav">
                <li class=" " >
                    <a href="#glowna">Main page
                        <i class="glyphicon glyphicon-send"></i></a>
                </li>
                <li class=" " >
                    <a href="#projekty" >Forums
                        <i class="glyphicon glyphicon-wrench"></i></a>
                </li>
                <li class="" >
                    <a href="#kontakt">Contact
                        <i class="glyphicon glyphicon-info-sign"></i></a>
                </li>
            </ul>
        </nav>


<section id="main page" ></section>
<section id="Forum" ></section>
<section id="Contact" ></section>

脚本

$('a').click(function(){
  $('section').fadeOut(400);
  $('section #'+this).fadeIn(400);
});

Answer 1

您需要使用 this.id 或 $(this).attr('id') 获取您点击的 anchor 的 id或 $(this).prop('id'):

$('a').click(function(){
    $('section').fadeOut(400);
    var id = this.id; //  or $(this).attr('id') or $(this).prop('id')
    $('section #'+id).fadeIn(400);
});

您可以阅读更多关于 attr() 的信息和 prop() .