如何使用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