+ Start a Discussion
S SaiS Sai 

Create tabs in visualforce page

HI ,

User-added image

 i am creating tabs like products, orders and  merchandise  when iam clicking product tab it display the product details in table format. here i am sending my code 

<apex:page controller="yourcontroller" standardstylesheets="false" showheader="false"  applyBodyTag="false" docType="html-5.0">
background-color :grey;
  ul#menu {
    padding: 30px 50px;

ul#menu li {
    display: inline;
ul#menu li a {
    background-color: orange;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius:  4px 4px 0 0  ;
ul#menu li a:hover {
    background-color: Blue;
#main {
    padding: 0;
    padding-left:  15px;
    padding-right: 15px;
    background-color: #ffffff;
    border-radius:  5px 5px;
<apex:form >
<ul id="menu" >
                      <li><a href="#" >Products</a></li>
                      <li><a href="#" >Orders</a></li>
                      <li><a  href="#">Merchandise</a></li>
                      <li><a href="#">PHP</a></li>

Please help

srlawr uksrlawr uk
Hi S S,

This looks like an interesting start to a piece of work. I can't see anything specifically wrong with your work, is there an error or hurdle you cannot get past to continue? If so, please post the details of it here as well. 

If you are getting an error, the contents of "yourcontroller" might be useful as well.

S SaiS Sai

HI Srlawr,

For example i have three custom objects like products, orders etc 

in my work iam creating only tabs using css and Html the problem is when i am clicking the any tab in that time show the tab related details in table format 


srlawr uksrlawr uk
Ok. cool. I did notice the "#" targets of your links.. Where exactly do you want them to go though? (ie. what is "tab related details")

If you want to redirect the user off to the standard list page for "Products" for example you have a couple of choices. You could just wire your link up to 

and that will take you to the products standard page, and for orders it would be:


now this is fine for standard objects, because they have consistant standard list view pages (ie. products is always 01t and orders 801) but Custom objects change, and so you would probably have to write a little function in your "yourcontroller" that either "described" the custom object via the schema() library, or loaded one of them up and chopped the first three characters off the ID... (you will notice that the "801" thing is the first three characters of every single order object in your organisation.

I am intrigued as to what will be on the "Any" page...