How to make links look like tabs using html/css?

Question

I have this wireframe I am working from: http://problemio.com/wireframe.pdf

I am trying to make the tabbed items that read like "ongoing discussion | suggested solutions | solution history... " to look tabbed as they are on the wireframe.

So far I am able to use JavaScript to show/hide the correct elements, but what I am not sure how to do is highlight the tab that is active, and how to draw the lines surrounding the tab.

Here is an example of what I have so far: http://www.problemio.com/problems/problem.php?problem_id=179

Even if I make each link a div, how do I toggle between the styling of those divs?

Thanks!!

Answer 1

If you already have the showing and hiding down and are looking for a non-jQuery option you could try something like this:

http://jsfiddle.net/wqEdj/

It's a basic styling of straight anchor elements.

Answer 2

You're easiest bet will be using jQueryUI Tabs. Example here http://jqueryui.com/demos/tabs/

Answer 3

Here is a CSS/JS solution that you can run here to see it in action. JQuery is used, but could easily be replaced with standard JS. No images required.

The source of this solution: https://css-tricks.com/better-tabs-with-round-out-borders/

Another related example with the tabs under the line can be found here: http://codepen.io/chriscoyier/pen/JozNqX

 $(function() { $("li").click(function(e) { e.preventDefault(); $("li").removeClass("selected"); $(this).addClass("selected"); }); }); 

 .tabrow { text-align: center; list-style: none; margin: 20px 0 20px; padding: 0; line-height: 24px; height: 26px; overflow: hidden; font-size: 12px; font-family: verdana; position: relative; } .tabrow li { border: 1px solid #AAA; background: #D1D1D1; background: -o-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%); background: -ms-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%); background: -moz-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%); background: -webkit-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%); background: linear-gradient(top, #ECECEC 50%, #D1D1D1 100%); display: inline-block; position: relative; z-index: 0; border-top-left-radius: 6px; border-top-right-radius: 6px; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF; text-shadow: 0 1px #FFF; margin: 0 -5px; padding: 0 20px; } .tabrow a { color: #555; text-decoration: none; } .tabrow li.selected { background: #FFF; color: #333; z-index: 2; border-bottom-color: #FFF; } .tabrow:before { position: absolute; content: " "; width: 100%; bottom: 0; left: 0; border-bottom: 1px solid #AAA; z-index: 1; } .tabrow li:before, .tabrow li:after { border: 1px solid #AAA; position: absolute; bottom: -1px; width: 5px; height: 5px; content: " "; } .tabrow li:before { left: -6px; border-bottom-right-radius: 6px; border-width: 0 1px 1px 0; box-shadow: 2px 2px 0 #D1D1D1; } .tabrow li:after { right: -6px; border-bottom-left-radius: 6px; border-width: 0 0 1px 1px; box-shadow: -2px 2px 0 #D1D1D1; } .tabrow li.selected:before { box-shadow: 2px 2px 0 #FFF; } .tabrow li.selected:after { box-shadow: -2px 2px 0 #FFF; } 

 <ul class="tabrow"> <li><a href="#">Lorem</a></li> <li><a href="#">Ipsum</a></li> <li class="selected"><a href="#">Sit amet</a></li> <li><a href="#">Consectetur adipisicing</a></li> </ul> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>