HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

Rendering tab data

Submitted by: @import:stackexchange-codereview··
0
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 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 function

function 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.