如何使用javascript单击链接有效地替换div内容？

Question

I have created an HTML page that uses bootstrap CSS. I have a sidebar list which is actually a list of links.

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

I have a number of sections in the HTML which is hidden by default by applying CSS like below.

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

I want to change the content when i click the links in the sidebar. What I've used here is JavaScript that sets the CSS display of the clicked link's section to block. For easier manipulation I remove the "ID" part from id of the link to get the id of the section Eg: link=utID , section= ut

Given below is the JavaScript that I've used. Is there a better optimized method to do this?

// 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

Using jquery is much easier!

The example

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', '');

 });