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

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>

文本文件：

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

演示

__

还检查您的html，例如，这里有一些问题：

<div id="sec-nav-container">而不是<div id="sec-nav-container>
<div id="sec-nav-items">而不是<div id="sec-nav-items>

Answer 2

试试这个替换代替$（'。subCat'）。click（function（）...

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

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

问题描述

2 个解决方案

解决方案1
0 2016-07-20 02:56:11

演示

解决方案2
0 2016-07-20 03:04:14

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

问题描述

2 个解决方案

解决方案1 0 2016-07-20 02:56:11

演示

解决方案2 0 2016-07-20 03:04:14

解决方案1
0 2016-07-20 02:56:11

解决方案2
0 2016-07-20 03:04:14