jQuery - tlam/Wiki GitHub Wiki

1. html output and fadeIn
   

   $(".ajax-output").hide().html("Some output").fadeIn("slow");
   

2. Prevent further processing of live or delegate, add return false:
   

   $("table").delegate("td", "hover", function(){
       $(this).toggleClass("hover");
       return false;
   });
   

<!-- html -->
<script type="text/javascript" src="/media/js/jquery.min.js"></script> 
<script type="text/javascript" src="/media/js/tabs.js"></script> 

<ul class="tabs">
  <li id="python-tab" class="current-selection">Python</li>
  <li id="ruby-tab">Ruby</li>
</ul>

<div id="python" class="tab">
  Python stuffs ...
</div>

<div id="ruby" class="tab">
  Ruby stuffs ...
</div>

/** tabs.css **/
.tabs {
  list-style: none;
  overflow: auto;
  margin: 0;
  padding: 0;
} 

.tabs li {
  border-right: 1px solid #A0B1B8;
  color: #5A4099;
  cursor: pointer;
  float: left;
  font-weight: bold;
  padding: 0.5em;
  text-align: center;
  width: 12em;
}

.tab {
  display: none;
}

.show {
  display: block;
}

.current-selection {
  background: #EEE;
}

/* tabs.js */
$(document).ready(function() {
    $(".tabs li").click(function() {
        var id_val = $(this).attr("id");
        $(".tabs li").removeClass("current-selection");
        $(this).addClass("current-selection");
        var section = id_val.replace('-tab', '');
        $(".tab").hide();
        $("#" + section).show();
    }); 
});