Question

我有以下两个项目列表，用于过滤内容。

在页面加载时，我希望第一个列表项处于活动状态，并显示＆＃34; mine＆＃34;的内容。

但是，第二个列表项显示的是结果。为了使此列表下方的内容显示＆＃34;我的仪表板＆＃34;没错，我必须点击它。我也想在页面加载时使用此功能。

我在页面加载时尝试了许多jQuery点击事件，但似乎没有任何效果。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="filtering" class="clearfix nav nav-tabs">
                <li class="filter-item active" data-rel="mine">My Dashboards</li>
                <li class="filter-item" data-rel="allAvail">All Available Dashboards</li>
            </ul>
            
            
                <li class="mine allAvail">Item 1</li>
                <li class="mine">Item 2</li>
                <li class="mine allAvail">Item 3</li>

＆＃13;

$(document).ready(function(){
            $('.filter-item').click(function(){
                // reset active class
                $('.filter-item').removeClass("active");
                // add active class to selected
                $(this).addClass("active");
                // return needed to make function work
                return false;
            });
            
            
            $(function() {
                // create an empty variable
                var selectedClass = "";
                // call function when item is clicked
                $(".filter-item").click(function(){
                    // assigns class to selected item
                    selectedClass = $(this).attr("data-rel");
                    // fades out all portfolio items
                    $(".portfolio li").fadeOut(300);
                    // fades in selected category
                    $(".portfolio li." + selectedClass).delay(300).fadeIn(500);
                });
            });
        });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

在页面加载时激活第一个列表项

0 个答案: