LI标签的问题

Question

UL.Categories LI A:Active部分无效。当我点击链接时它会应用这种风格，一旦我释放它，它就会返回到它的默认风格。我已经包括了我的旧JS和新JS。我不知道如何多次将我的旧JS包含在HTML部分中（它仅适用于一个，但只要我复制了HTML内容，就会失去它的风格），所以我制作了新的JS，尽管是旧的JS与HTML部分非常合作。新JS不会保持UL.Categories LI A:Active风格...任何帮助？

老JS：

<SCRIPT>
$(function()
{
  $('UL.Categories LI:First').addClass('TheActiveTab');
  $('.CategoriesContents ARTICLE').hide();
  $('.CategoriesContents ARTICLE:First').show();
  $('UL.Categories LI').on('click',function()
{
    $('UL.Categories LI').removeClass('TheActiveTab');
    $(this).addClass('TheActiveTab')
    $('.CategoriesContents ARTICLE').hide();
    var activeTab = $(this).find('a').attr('href');
    $(activeTab).show();
    return false;
  });
})
</SCRIPT>

新JS：

<SCRIPT>
$(document).ready(function()
{
$('.Categories > LI > #ATB').click(function()
{
    $('.CategoriesContents > #About').fadeIn(800); //fadeToggle()/show();
    $('.CategoriesContents > #Editions').hide(); return false;
});
$('.Categories > LI > #EDIT').click(function()
{
    $('.CategoriesContents > #Editions').fadeIn(800);
    $('.CategoriesContents > #About').hide(); return false;
});

$('.Categories2 > LI > #ATB').click(function()
{
    $('.CategoriesContents2 > #About').fadeIn(800); //fadeToggle()/show();
    $('.CategoriesContents2 > #Editions').hide(); return false;
});
$('.Categories2 > LI > #EDIT').click(function()
{
    $('.CategoriesContents2 > #Editions').fadeIn(800);
    $('.CategoriesContents2 > #About').hide(); return false;
});
});
</SCRIPT>

CSS：

UL.Categories,
UL.Categories2
{
    BORDER: 1px Solid #FFF;
    WIDTH: 100%;
    DISPLAY: Table;
    MARGIN: 0 0 0 0;
    LIST-STYLE-TYPE: None;
    PADDING: 7px 7px 7px 7px;
    BORDER-BOTTOM: 1px Solid #404040;
}
UL.Categories LI,
UL.Categories2 LI
{
    BORDER: 1px Solid #FFF;
    FLOAT: Left;
    HEIGHT: 50px;
    WIDTH: Auto;
    MARGIN: 0 0 0 0;
    DISPLAY: Table-Cell;
    WHITE-SPACE: NoWrap;
    TEXT-ALIGN: Center !important;
    PADDING: 12px 20px 7px 20px !important;
}
UL.Categories LI A:Link,
UL.Categories LI A:Visited
{
    BORDER: 1px Solid #FFF;
    FONT-SIZE: 20px;
    FONT-STYLE: Normal;
    FONT-WEIGHT: Normal;
    TEXT-DECORATION: None;
    COLOR: rgba(255, 255, 255, 1);
    TEXT-TRANSFORM: UpperCase;
    FONT-FAMILY: "Modricha" !important;
    -WEBKIT-FONT-SMOOTHING: Antialiased;
    -KHTML-FONT-SMOOTHING: Antialiased;
    -MOZ-FONT-SMOOTHING: Antialiased;
    -MS-FONT-SMOOTHING: Antialiased;
    -O-FONT-SMOOTHING: Antialiased;
    FONT-SMOOTHING: Antialiased;
}
UL.Categories LI A:Hover,
UL.Categories2 LI A:Hover
{
    BORDER: 1px Solid #FFF;
    PADDING-BOTTOM: 2px;
    TEXT-DECORATION: None;
}
UL.Categories LI A:Active,
UL.Categories2 LI A:Active
{
    BORDER: 1px Solid #FFF;
    TOP: 0;
    HEIGHT: 100%;
    POSITION: Relative;
    COLOR: rgba(255, 255, 255, 0.5) !important;
    ➛ BORDER-BOTTOM: 5px Solid #95B5AF !important;
    BACKGROUND-COLOR: Transparent;
    ➛ TRANSITION: All 0.2s Ease 0s;
    -O-TRANSITION: All 0.2s Ease 0s;
    -MS-TRANSITION: All 0.2s Ease 0s;
    -MOZ-TRANSITION: All 0.2s Ease 0s;
    -KHTML-TRANSITION: All 0.2s Ease 0s;
    -WEBKIT-TRANSITION: All 0.2s Ease 0s;
    BOX-SIZING: Border-Box;
    -O-BOX-SIZING: Border-Box;
    -MS-BOX-SIZING: Border-Box;
    -MOZ-BOX-SIZING: Border-Box;
    -KHTML-BOX-SIZING: Border-Box;
    -WEBKIT-BOX-SIZING: Border-Box;
}
ARTICLE
{
    BORDER: 0;
    PADDING: 0;
}

HTML：

<UL class="Categories">
<LI>
<A href="#About" id="ATB">About This Book</A>
</LI>
<LI class="Kate">
<A href="#Editions" id="EDIT">Editions</A>
</LI>
</UL>
<DIV class="TheCleaner"></DIV>
<SECTION class="CategoriesContents">
<ARTICLE id="About" class="Description"></ARTICLE>
<ARTICLE id="Editions" class="Description" style="DISPLAY: None"></ARTICLE>
</SECTION>