CODEWITHSUNDEEP
jqueryhtmlcssjquery-uitabs
Rahul Shah
Rahul Shah

Reputation: 1407

How to put borders to <li> onclick in css Tabs

I have css tabs with jquery fadein effect with the help of the tutorial here.I want the css to look something like this http://img.ctrlv.in.s3.amazonaws.com/img/518e3d3e07928.jpg

Here's where I have reached so far.However once the tab is clicked ,the borders of the tabs disapper,I tried applied border-top:solid 1px #ddd;,but its acting as if there's no such code.Can anyone help me please.

Upvotes: 1

Views: 605

Answers (1)

Senjai
Senjai

Reputation: 1816

Your problem is here: 

    #tabs #current a{

   background:#f8f8f8;
    height:60px;
    position:relative;
    top:-4px;
    padding-top:4px;
    border-left-width:1px;
    color:#111;
    -webkit-border-radius:3px 3px 3px 3px;
    -moz-border-radius:3px 3px 3px 3px;
    border-radius:3px 3px 3px 3px;
    margin:0 0 0 -1px;
    z-index:46;
border:solid 1px #ddd;}

First of all, make sure your border: attribute has a style, a thickness and a color. Some of your borders in your css don;t.

Second, your problem here is your using #tabs #current a as your selector. I think you meant to use #tabs #current li.

The container for your 'button' or 'tab' at the top is an li element. You have a link inside of the li element, but adding a border to it won't help because you're really adding a border inside of the tab.

tabs li affects the tabs when they are in an 'unactivated' state. tabs current li affects the one that's currently in focus.

If you wanted to add text decoration/styling to the link in focus (the text in for the tab in this case) you would use #tabs #current a. This switch solves your border issue, but I'm not sure it helps you reach your end goal with the project. The user cannot now determine besides the change in content, which is the active tab.

Cheers!

Upvotes: 1

Related Questions