如何使用javascript單擊鏈接有效地替換div內容？

Question

我創建了一個使用引導CSS的HTML頁面。 我有一個側邊欄列表，實際上是鏈接列表。

<a href="#ut" class="list-group-item" id="utID">Update table</a>  

我在HTML中有很多部分，默認情況下，通過應用如下所示的CSS隱藏這些部分。

<section id="ut" style="display:none;">

單擊側邊欄中的鏈接時，我想更改內容。 我在這里使用的是JavaScript，它將點擊鏈接部分的CSS顯示設置為阻止。 為了便於操作，我從鏈接的ID中刪除了“ ID”部分，以獲取該部分的ID，例如：link = utID，section = ut

下面給出的是我使用過的JavaScript。 有沒有更好的優化方法來做到這一點？

// On clicking any of the side bar links
$('.list-group-item')
.click(function(event){

    // Preventing the default action which may mess up the view
    event.preventDefault();

    // Getting all the anchor ids
    var $a1 = document.getElementById("unfID");
    var $a2 = document.getElementById("uiID");
    var $a3 = document.getElementById("utID");

    // Getting all the section ids
    var $d1 = document.getElementById("unf");
    var $d2 = document.getElementById("ui");
    var $d3 = document.getElementById("ut");

    // Store the id of the clicked link
    var $clickedLink = $(this).attr('id');

    // Storing the id of the corresponding Div by slicing of "ID" from the link's last part
    var $clickedLinkDiv = $clickedLink.substring(0,$clickedLink.length-2);

    // Setting the selected link active
    SetLinkActive(document.getElementById($clickedLink))
    // Setting the corresponding section visible
    SectionVisibility(document.getElementById($clickedLinkDiv));

    // Method to set the visibility of the section
    function SectionVisibility(div){
        // first hides al section
        $d1.style.display = "none";
        $d2.style.display = "none";
        $d3.style.display = "none";

        // then displays only the selected section
        div.style.display = "block";
    }

    // Method to set the visibility of the section
    function SetLinkActive(div){
        // first deselect all links
        $a1.className = "list-group-item";
        $a2.className = "list-group-item";
        $a3.className = "list-group-item";

        // then applies selection to only the selected link
        div.className = "list-group-item active";
    }
 });

Answer 1

使用jQuery要容易得多！

這個例子

HTML

<a href="#" class="list-group-item" id="unf">Update UNF</a>  
<a href="#" class="list-group-item" id="ui">Update UI</a>  
<a href="#" class="list-group-item" id="ut">Update UT</a>  

<section class="unf" style="display:none;">
    UNF SECTION
</section>

<section class="ut" style="display:none;">
    UI SECTION
</section>

<section class="ui" style="display:none;">
    UT SECTION
</section>

JAVASCRIPT

// On clicking any of the side bar links
$('.list-group-item').click(function(event){

    // Preventing the default action which may mess up the view
    event.preventDefault();

    $('a.list-group-item').removeClass('active');
    $(this).addClass('active');
    $('section').css('display', 'none');
    $('section.' + $(this).attr('id')).css('display', '');

 });