-
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
live
ordelegate
, 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(); }); });