Question

在我的菜单中，当选择一个链接时，“选择”将附加到类名称，以便背景位置跳转，突出显示菜单项而不重新加载页面。这很好用，但是一旦选择了另一个链接，我似乎无法从元素中删除该类。我尝试了一个while循环，冻结了我的页面。这和Ive一样接近，但它仍然没有执行声明的“else”部分。 CSS很好，它只是不清楚。先感谢您！

的Javascript

<script type="text/javascript">
    $(document).ready(function() {      
        $('#navigation li a').click(function(e){                                          
            var toLoad = $(this).attr('href');                      
            var fadeInData = function fadeInData() { $('#content').fadeIn(); }              
            var loadData = function loadData() { $('#content').load(toLoad, fadeInData); }
            $('#content').fadeOut(loadData); 



                var page = $(this).attr('href');        
                var page = page.replace(".php", ""); 
                var css = page + "-selected";
                var parentClass =  $(e.target).closest("a").attr("class");

                if (parentClass != css) { 
                   $(e.target).closest("a").removeClass(page).addClass(css);
                } else
                {

                    $("ul li").removeClass(css).addClass(page);
                }

            return false;
        });     
    });

列表

<div id="nav">
<ul id="navigation">
    <li style="padding-left:0px; important!" ><a href="FB.php" class="FB" ></a></li>
    <li><a href="SPECS.php"  class="SPECS"></a></li>
    <li><a href="APPS.php"  class="APPS"></a></li>
    <li><a href="CONTACT.php"  class="CONTACT"></a></li>
    <li style="padding-right:0px; important!"><a href="home.php"  class="home"></a></li>
</ul>

Answer 1

而不是按照以下方式构建您选择的类：

var css = page + "-selected";

您可以让事情变得更轻松，只需使用.selected

即可

$('#navigation li a').removeClass('selected');

然而，如果您无法做到，

$('#navigation li a').each(function(){
  var className = $(this).attr('href').replace('.php', '') + '-selected';
  $(this).removeClass(className);
});

使用第二种方法jsfiddle上的代码示例。

Answer 2

代码中的相关部分：

$(document).ready(function(){
    var links = $('#navigation li a');
    links.click(function(e){
        links.removeClass(page + '-selected').addClass(page);
        $(this).addClass(page + '-selected').removeClass(page);
    }
}

虽然使用“选定”课程要容易得多。

如果您想要更高效的内容，请存储对最后点击链接的引用，并在其上运行.removeClass.addClass而不是所有链接。

Answer 3

一种简单的方法是在应用于当前元素之前从列表中的所有元素中删除该类：

$(function() {
    $('#navigation ul li a').click(function() {
        $('#navigation ul li a').each(function() {
            $(this).removeClass('selected');
        });
        $(this).addClass('selected');
    });
});

Answer 4

只需使用以下内容替换您的代码：

$(document).ready(function() {
    $('#navigation li a').click(function() {
       $('#content').fadeOut().load($(this).attr('href')).fadeIn();

       $('#navigation ul li a').each(function() {
          $(this).removeClass('selected');
       });
       $(this).addClass('selected');

    });
});

Jquery - 在从以前单击时删除列表时添加类

4 个答案: