CODEWITHSUNDEEP
jqueryhtmlcss
Attila Naghi
Attila Naghi

Reputation: 229

CSS tab menu issue

this is the Javascript part:

<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery("ul#tabs li").click(function(e){
        if (!jQuery(this).hasClass("active")) {
            var tabNum = jQuery(this).index();
            var nthChild = tabNum+1;
            jQuery("ul#tabs li.active").removeClass("active");
            jQuery(this).addClass("active");
            jQuery("ul#tab li.active").removeClass("active");
            jQuery("ul#tab li:nth-child("+nthChild+")").addClass("active");
        }
    });
});
</script>

This is the CSS part:

ul#tabs {
    list-style-type: none;
    padding: 0;
    border: 1px solid #F2F2F2;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 700;
}
ul#tabs li {
    display: inline-block;
    padding: 10px 15px;
    border-right: 1px solid #F2F2F2;
    cursor: pointer;
    color: #A5A5A5;
}
ul#tabs li:hover {
    /*background-color: #238b68;*/
    color: #BA1707;
}
ul#tabs li.active {
    margin: 0px 0px -1px;
    color: #BA1707;
    /*background-color: #238b68;*/
}
ul#tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
ul#tab li {
    display: none;
}
ul#tab li.active {
    display: block;
}

And finally this is the HTML part: 

<div class="tabmenu">
            <ul id="tabs">
                <li class="active">Description</li>
                <li>Reviews</li>
                <li>Ask a question</li>
            </ul>
            <ul id="tab">
                <li class="active">
                    <div class="product-attributes">
                        <?php echo $this->getChildHtml('attributes');?>
                    </div> 
                </li>
                <li>
                    <?php echo $this->getChildHtml('review_block');?>
                </li>
                <li>
                    <div class="support_box">
                        <?php echo $this->getChildHtml('product.support') ?>
                    </div> 
                </li>
            </ul>
        </div>

You can see the result in the Fiddle

BUT, my problem is when a tab is active I want to clear off the border-bottom below. How can I do that? Thanks in advance.

[UPDATE] This is how I want to look like:enter image description here. There is a black bottom line. I want it . The rest is all good

Upvotes: 3

Views: 209

Answers (6)

harris
harris

Reputation: 251

Here's a solution utilising z-index to essentially cover the bottom border of the UL with a white border on the active LI:

ul#tabs li {
  position: relative;
  z-index: 5;
  display: inline-block;
  padding: 10px 15px;
  border-right: 1px solid #F2F2F2;
  cursor: pointer;
  color: #A5A5A5;
}

There is also a problem with the whitespace between the LI elements, hence the comment tags in the HTML to remove those pesky spaces, which otherwise caused problems with the width of the borders.

<ul id="tabs">
  <li class="active">Description</li><!--
  --><li>Reviews</li><!--
  --><li>Ask a question</li>
</ul>

Fiddle: https://jsfiddle.net/mn3g8u9a/

Upvotes: 3

Swaranan Singha Barman
Swaranan Singha Barman

Reputation: 347

Add border-bottom:none in ul#tabs, then add border-bottom:1px solid #F2F2F2; on ul#tabs li, and add border-bottom:none in ul#tabs li.active.

Fiddle

Upvotes: 0

user4458951
user4458951

Reputation: 

  .tabmenu {width:100%;}
ul#tabs {
    list-style-type: none;
    padding: 0;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 700;
}
ul#tabs li {
    display: inline-block;
    padding: 10px 15px;
    border: 1px solid #F2F2F2;
    cursor: pointer;
    color: #A5A5A5;
}
ul#tabs li:hover {
    /*background-color: #238b68;*/
    color: #BA1707;
}
ul#tabs li.active {
    margin: 0px 0px -1px;
    color: #BA1707;
    border: 1px solid #F2F2F2;
    border-bottom:transparent;
    /*background-color: #238b68;*/
}
ul#tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
ul#tab li {
    display: none;
}
ul#tab li.active {
    display: block;

}

Upvotes: 0

Rohit Kumar
Rohit Kumar

Reputation: 2031

I think you want the appearance to look like this - https://jsfiddle.net/p2dk1txu/5/

what I did is used display: table-cell instead of display: inline-block and set border-collapse: collapse, also the borders were set on li instead of ul

Upvotes: 2

Marcos P&#233;rez Gude
Marcos P&#233;rez Gude

Reputation: 22158

See this fiddle:

https://jsfiddle.net/p2dk1txu/4/

It has the border in the <li> and when is active the border bottom changes to zero. To avoid tab margins, I put font-size: 0 in tabs and font-size:14px in <li>. Because using inline-block there is an space in there.

    ul#tabs {
        font-size:0;
        list-style-type: none;
        padding: 0;
        text-transform: uppercase;
        font-weight: 700;
    }
    ul#tabs li {
        font-size: 14px;
        display: inline-block;
        padding: 10px 15px;
        border: 1px solid #F2F2F2;
        cursor: pointer;
        color: #A5A5A5;
    }
    ul#tabs li:hover {
        /*background-color: #238b68;*/
        color: #BA1707;
    }
    ul#tabs li.active {
        margin: 0px 0px -1px;
            border-bottom:0;
        color: #BA1707;
        /*background-color: #238b68;*/
    }

Upvotes: 0

jennEDVT
jennEDVT

Reputation: 739

The problem is that your border is on the ul, but you're trying to remove the border-bottom from a single li. To fix this:

First, move border: 1px solid #F2F2F2; off of ul#tabs and onto ul#tabs li.

Then, add border-bottom: none; to ul#tabs li.active

Hope that helps!

Upvotes: 0

Related Questions