DEMO

Question

我正在尝试使用jQuery AJAX load（）方法从文本文件加载一些链接到导航菜单。它在加载链接时工作正常，但它不允许我为当前链接应用活动类。它将所有其他CSS应用于链接，但不应用于活动类。我错过了什么吗？

我的HTML / jQuery：

<!DOCTYPE html>
<html>
    <head>
        $(document).ready(function(){

            $('#cat-1-button').click(function(){
                $('#sec-nav-container').show();
                $('#sec-nav-items').load('textfile.txt #cat-1-items');
                return false;
            });

            $('.subCat').click(function() {
                $('.subCat').removeClass('active');
                $(this).addClass('active');
                return false;
            });

        });

    </head>

    <body>

        <div id="sec-nav-container> 
            <div id="sec-nav-items> </div>
        </div>

        <button type="button" id="cat-1-button"> Click Here </button>

    </body>

</html>

Textfile：

<div id="cat-1-items">
        <a href="#" class="subCat"> cat1-sub1 </a>
        <a href="#" class="subCat"> cat1-sub2 </a>
        <a href="#" class="subCat"> cat1-sub3 </a>
        <a href="#" class="subCat"> cat1-sub4 </a>
        <a href="#" class="subCat"> cat1-sub5 </a>
        <a href="#" class="subCat"> cat1-sub6 </a>
        <a href="#" class="subCat"> cat1-sub7 </a>
</div>

CSS：

.active {
    padding-bottom: 2px;
    border-bottom: 10px solid #6b00b3;
}

Answer 1

您可能需要为伪元素:visited

添加规则

.active,.active:visited {
    padding-bottom: 2px;
    border-bottom: 10px solid #6b00b3;
}

DEMO

__

还要检查你的html，例如，你在这里遇到了一些问题：

<div id="sec-nav-container">代替<div id="sec-nav-container>
<div id="sec-nav-items">代替<div id="sec-nav-items>

Answer 2

尝试替换$（'。subCat'）。点击（function（）...

$('#sec-nav-items').on( 'click', 'a.subCat', function(){
  $('.subCat').removeClass('active');
  $(this).addClass('active');
  return false;
})

如何将使用jQuery load（）方法从txt文件加载的链接设置为HTML格式？

2 个答案:

DEMO