How to make clicking a tab perform an action?
I am having a hard time implementing a feature on my website. I want an input box to appear when the "sell" tab is clicked, and I cannot figure out how to do it with Jquery. I can't figure out how to chain an action to tabs.
Can anybody help me out? Thanks.
here is my code so far
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<style type="text/css">
.hide{display:none;}
.show{display:block;}
</style>
- <SCRIPT type=text/javascript>
$(function() {
$("#tabs").tabs();
});
$('#tabs-2').bind('tabsselect', function(event, ui) {
- /* Objects available in the function context:
ui.tab // anchor element of the selected (clicked) tab
ui.panel // element, that contains the selected/clicked tab contents
ui.index // zero-based index of the selected (clicked) tab
*/ if (ui.index == 1) {
$("#tabs-2").click(function(){
$(".hide").switchClass('hide', 'show');
}});
</SCRIPT>
- </head>
- <body>
<DIV class=demo>
<DIV id=tabs>
<UL>
<LI><A href="#tabs-1">Buy</A></LI>
<LI ><A href="#tabs-2" >Sell</A></LI>
</UL>
<DIV id=tabs-1>
<P></P></DIV>
- <DIV id=tabs-2>
</DIV>
- </DIV></DIV><!-- End demo -->
<DIV style="DISPLAY: none" class=demo-description>
<P>Click tabs to swap between content that is broken into logical sections.</P></DIV><!-- End-->
<form id="priceBox" class="hide">
<input type="text" /><input type="button" value="set price" />
</form>
- </body>
</html>