O'Reilly logo

PHP jQuery Cookbook by Vijay Joshi

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating a wizard using tabs

This recipe will explain how you can create a wizard in which you can guide a user step by step.

Getting ready

Create a folder for this recipe and name it as Recipe7. Create an index.html file inside it.

How to do it...

  1. Similar to the previous recipe, create the structure for tabs using list items of an unordered list as tab headers and DIV elements with class tabContent as containers for respective tabs. Do not forget to define the CSS styles in the head section.
    <html> <head> <title>Tabs</title> <style type="text/css"> body { font-family:"Trebuchet MS",verdana; margin: 50px auto; width:600px; } .tabContainer { border:1px solid black; float:left; width:600px; } ul { float: left; margin: 0pt; padding: 0pt; list-style: ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required