-
Notifications
You must be signed in to change notification settings - Fork 0
jQuery
tlam edited this page Oct 18, 2010
·
6 revisions
- html output and fadeIn
$(".ajax-output").hide().html("Some output").fadeIn("slow"); - Prevent further processing of
liveordelegate, addreturn 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();
});
});