Need to customize jquery tabs css

Question

Hi here i have used jquery tabs and then my output is like

and i need to get like (Need to remove line below selected tab)

My code is like

css:

<script type="text/css">
    body {
        background-color: #eef;     
    }
    #tabs {
        width: 95%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 10px;
    }
</script>

Layout:

<div id="tabs" style="min-height:200px;">
            <ul>
                <li><a href="#mission">Mission</a></li>
                <li><a href="#vision">Vision</a></li>
                <li><a href="#noticeBoard">Notice Board</a></li>
            </ul>
            <div id="mission">
                <p>${homePage.mission}</p>
            </div>
            <div id="vision">
                <p>${homePage.vision}</p>
            </div>
            <div id="noticeBoard">
            </div>
        </div>

js:

$("#tabs").tabs();

Can anybody help me doing this

Answer 1

Maybe you have changed the default CSS in some point because for default that's the style of the tabs. Check this Demo Fiddle

The style that hides the bottom-border for the active tab is this:

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
     margin-bottom: -1px; padding-bottom: 1px;
}