patternjavascriptMinor
Rendering tab data
Viewed 0 times
tabrenderingdata
Problem
I'm using basic jQuery to render tab data. I was wondering if anybody could comment on how to refactor the
Here's the code/output in jsFiddle.
click() event handlers, and any general guidance or advice.Here's the code/output in jsFiddle.
('#tab1').click(function() {
$("#page").empty().html("Here is our menu: Crispy Duck, Shrimp Tempura, Christmas Roll ");
$("a").removeClass("active");
$(this).addClass("active");
});
$("#tab2").click(function() {
$("#page").empty().html("We're located at: 13352 Minnieville Rd., Woodbridge, VA ");
$("a").removeClass("active");
$(this).addClass("active");
});
$("#tab3").click(function() {
$("#page").empty().html("We can be reached at: (555)555-5555.");
$("a").removeClass("active");
$(this).addClass("active");
});Solution
You can simply put your common code in a
And call this
And so on ...
functionfunction giveItAName(htmlValue,self){
$("#page").empty().html(htmlValue);
$("a").removeClass("active");
$(self).addClass("active");
}And call this
function accordingly ('#tab1').click(function() {
giveItAName("Here is our menu: Crispy Duck, Shrimp Tempura, Christmas Roll ",this);
});And so on ...
Code Snippets
function giveItAName(htmlValue,self){
$("#page").empty().html(htmlValue);
$("a").removeClass("active");
$(self).addClass("active");
}('#tab1').click(function() {
giveItAName("<p>Here is our menu: Crispy Duck, Shrimp Tempura, Christmas Roll</p> ",this);
});Context
StackExchange Code Review Q#55257, answer score: 5
Revisions (0)
No revisions yet.