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";
}
});
Using jquery is much easier!
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', '');
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.