javascript/jquery shorthand code and active function

I have this code i would like to know if there is a shorter way of writing it?

also which code do i need to make an active tab stay active when on the relevant div

thanks

$(document).ready(function () {



$(".overveiw").click(function () {
    $(".div1").show();
    $(".div2").hide();
    $(".div3").hide();
    $(".div4").hide();
    $(".div5").hide();
});
$(".tour").click(function () {
    $(".div2").show();
    $(".div1").hide();
    $(".div3").hide();
    $(".div4").hide();
    $(".div5").hide();
});

$(".websites").click(function () {
   $(".div3").show();
   $(".div1").hide();
   $(".div2").hide();
   $(".div4").hide();
   $(".div5").hide();
});

$(".faq").click(function () {
    $(".div4").show()开发者_如何转开发;
    $(".div1").hide();
    $(".div3").hide();
    $(".div2").hide();
    $(".div5").hide();
});

$(".support").click(function () {
   $(".div5").show();
   $(".div1").hide();
   $(".div3").hide();
   $(".div4").hide();
   $(".div2").hide();
});
});

It looks like what you're trying to do is show one div and hide a bunch of others when other elements are clicked — e.g., a tabbed interface.

The easy way is to use something someone's already built for you, like jQuery UI's tabs.

But you can also easily relate the divs to show/hide (the panels) and the divs that you click on (the tabs) by giving them some information in common. For instance, if you put an attribute on the panels that identifies the tab they belong to, this gets a lot shorter:

$(".overview, .tour, .websites, .faq").click(function() {
    var thisTab = $(this).attr("data-panel");
    var container = $("#container");
    container.find("div").hide();
    container.find("div[data-panel=" + thisTab + "]").show();
});

...works if you put a data-panel attribute on both the tab and panel that agrees. Live example

But if you run that live example without JavaScript, notice how it doesn't degrade well. That's why you normally see this done with lists and anchors for navigation, e.g., like this:

<ul id='tabs'>
  <li class="overview"><a href="#overview">Overview</a></li>
  <li class="tour"><a href="#tour">Tour</a></li>
  <li class="websites"><a href="#websites">Websites</a></li>
  <li class="faq"><a href="#faq">FAQ</a></li>
</div>
<div id='container'>
  <div id="overview">The overview panel</div>
  <div id="tour">The tour panel</div>
  <div id="websites">The websites panel</div>
  <div id="faq">The FAQ panel</div>
</div>

With this code:

$("#container div:not(#overview)").hide();
$("#tabs > li > a").click(function() {
  var thisTab = this.href;
  var index = thisTab.indexOf("#");
  if (index >= 0) {
    thisTab = thisTab.substring(index + 1);
  }
  $("#container div").hide();
  $("#" + thisTab).show();
  return false;
});

Live example

Give each of those divs another class:

<div class="div1 new_class"></div>

Then:

$(".overveiw").click(function () {
    $(".new_class").hide();
    $(".div1").show();
});