JQuery tab selectors

Does anyone know how I can hide the tab anchors for a jQuery tab control?

I am trying to do a wizard customization type, having multiple views that are hidden but only show when I want them.

Any ideas? Anything other than tabs that I could use?

0


a source to share


2 answers


just hide and show divs works great here



<html>
  <head>
    <script type="text/javascript"
            src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js">
    </script>
    <script type="text/javascript">
$(function() {
  $(".nextButton").click(function() {
    $(this).parent().hide().next().show();
  });
  $(".prevButton").click(function() {
    $(this).parent().hide().prev().show();
  });
});
    </script>
  </head>
  <body>
    <div>
      Tab One<br/>
      <input type="button" class="nextButton" value="next"/>
    </div>
    <div style="display:none;">
      Tab Two<br/>
      <input type="button" class="prevButton" value="prev"/>
      <input type="button" class="nextButton" value="next"/>
    </div>
    <div style="display:none;">
      Tab Three<br/>
      <input type="button" class="prevButton" value="prev"/>
    </div>
  </body>
</html>

      

+3


a source


Just create divs on top of each other and show / hide them using show () and hide (). No need for tabs if you just want to switch views programmatically. It's as easy as

Html:

<div class="view" id="view1">
</div>
<div class="view" id="view2">
</div>
<div class="view" id="view2">
</div>

      

JavaScript:



function selectView(i) {
    $(".view").hide();
    $("#view" + 1).show();
}

      

or if you don't want to use IDs:

function selectView(i) {
    $(".view").hide();
    $(".view :eq(" + 1 + ")").show();
}

      

0


a source







All Articles