Question

I’ve just discovered idTabs and I’m trying to get a simple one working on my webserver. I’ve copied the code on the page called ‘Usual’ and called the plugin file and jQuery but all I get is…

- Tab 1
- Tab 2
- Tab 3
This is tab 1.

Understandably this is un-styled as I’m yet to add CSS, but surely this is provided with idTabs? I don’t see it anywhere. Where am I going wrong?

Answer 1

From http://www.sunsean.com/idTabs/main.css:

/* Style for Usual tabs */
.usual {
  background:#181818;
  color:#111;
  padding:15px 20px;
  width:500px;
  border:1px solid #222;
  margin:8px auto;
}
.usual li { list-style:none; float:left; }
.usual ul a {
  display:block;
  padding:6px 10px;
  text-decoration:none!important;
  margin:1px;
  margin-left:0;
  font:10px Verdana;
  color:#FFF;
  background:#444;
}
.usual ul a:hover {
  color:#FFF;
  background:#111;
  }
.usual ul a.selected {
  margin-bottom:0;
  color:#000;
  background:snow;
  border-bottom:1px solid snow;
  cursor:default;
  }
.usual div {
  padding:10px 10px 8px 10px;
  *padding-top:3px;
  *margin-top:-15px;
  clear:left;
  background:snow;
  font:10pt Georgia;
}
.usual div a { color:#000; font-weight:bold; }