Simple tabs for a site on jQuery, is it even easier?

Question

css

Goal:
Minimum code,
maximum compatibility,
no hashes,
no jQ UI

Current implementation:

#wrapper div {<br>
    display:none;<br>
}<br>
#wrapper.tab1 div.tab1 {<br>
    display:block;<br>
    width:100%;<br>
}<br>
#wrapper.tab2 div.tab2 {<br>
    display:block;<br>
    width:100%;<br>
}<br>
#wrapper.tab3 div.tab3 {<br>
    display:block;<br>
    width:100%;<br>
}<br>
#wrapper.tab1 a.tab1 {<br>
    color: black;<br>
    cursor: default;<br>
    font-weight: bold;<br>
    text-decoration: none;<br>
}<br>
#wrapper.tab2 a.tab2 {<br>
    color: black;<br>
    cursor: default;<br>
    font-weight: bold;<br>
    text-decoration: none;<br>
}<br>
#wrapper.tab3 a.tab3 {<br>
    color: black;<br>
    cursor: default;<br>
    font-weight: bold;<br>
    text-decoration: none;<br>
}<br>

<div id="wrapper" class="tab1"><br>
    <a href="#" class="tab1">Вкладка 1</a><br>
    <a href="#" class="tab2">Вкладка 2</a><br>
    <a href="#" class="tab3">Вкладка 3</a><br>
<br>
    <div class="tab1">Содержимое 1</div><br>
    <div class="tab2">Содержимое 2</div><br>
    <div class="tab3">Содержимое 3</div><br>
</div>​<br>

$('#wrapper a').click(function() {<br>
        if ($(this).attr('class') != $('#wrapper').attr('class') ) {<br>
            $('#wrapper').attr('class',$(this).attr('class'));<br>
        }<br>
    });​<br>
<br>

Question:
Is it possible to make CSS more concise?

Demo that can be forked.

Answer 1

For links with href=# you have to take your hands off. What is this link that doesn't lead anywhere? Further, with JavaScript disabled, you will have a blank page. further, why pull a 150-KB heavy framework, from which the iPhone freezes, for the sake of tabs?
Further. Here you have
#wrapper div { display:none; }
What if there are more divs inside the contents of the tab? And if there is another block of tabs inside the tab? BUT?
Further, what if there are more than 3 tabs?
Made for C grade, at the level of a schoolboy who read the site htmlbook.ru for the first time and wanted to create something. With a bunch of mistakes. Bad, in short.
And what does "without using hashes" mean? Why else is this?
By the way, tabs can be done without Javascript at all, but you are probably still far from that. Also, the layout of tabs can be made more semantic - google, Sergei Chikuenok had an article on this topic.

Answer 2

>For links with href=# it is necessary to tear off hands.
This is not production code, this is an EXAMPLE, you like it better href="javascript:;"?
> What if there are more divs inside the content of the tab?
I'll add a tab_item class on top and write
#wrapper div.tab_item { display:none; }
#wrapper div { display:none; }
>why pull a 150-KB heavy framework, from which the iPhone freezes, for the sake of tabs?
I'm not going to write pages for iPhones, it makes no sense for me to refuse Jq.
>And if there is another block of tabs inside the tab?
We'll get out somehow :) I'm not going to write a universal solution where it's not needed.
>Next, what if there are more than 3 tabs?
Yes, at least 10, here's an example
> ... at the level of a schoolboy who first read the site htmlbook.ru and wanted to create something.
> with lots of bugs. Bad, in short.
Thank you, your opinion is very important to me. Submit your solution here.
> And what does "without the use of hashes" mean? Why else is this?
I meant anchors (anchors), I just use anchors for other tasks.
> no javascript at all, but apparently you are still far from that.
Where can I go :)
>Can I make CSS more concise? It can be removed altogether .
Great idea, the layout designer will thank me :)
Oh, how wonderful you are trolling.

Answer 3

I used to make tabs like this jsfiddle.net/ademaro/S4kTx/ :

<dl class="tabs">
    <dt class="active">Вкладка 1</dt>
    <dd class="active"><div>Содержимое 1</div></dd>
    <dt>Вкладка 2</dt>
    <dd><div>Содержимое 2</div></dd>
</dl> 
    
<script type="text/javascript">    
$(function(){
    $("dl.tabs dt").click(function(){
        $(this)
            .siblings().removeClass("active").end()
            .next("dd").andSelf().addClass("active");
    });
});
</script>

In general, it is possible without js: jsfiddle.net/ademaro/WwrsX/

Answer 4

Maximum compatibility, without jQuery UI tynts
All the code that YOU need to write:

<div class="tabbable">
    <ul class="nav-nav-tabs">
    <li class="active"><a href="#1" data-toggle="tab">Section 1</a></li>
    <li><a href="#2" data-toggle="tab">Section 2</a></li>
    </ul>
    <div class="tab-content">
    <div class="tab-pane active" id="1">
    <p>I'm in Section 1.</p>
    </div>
    <div class="tab-pane" id="2">
    <p>Howdy, I'm in Section 2.</p>
    </div>
    </div>
</div>

Answer 5

Here is another option

#wrapper div {
    display:none;
}
#wrapper a.active {
    color: black;
    cursor: default;
    font-weight: bold;
    text-decoration: none;
}
#wrapper div.active {
    display:block;
    width:100%;
}

<div id="wrapper">
    <a href="#" id="tab1" class="active">Вкладка 1</a>
    <a href="#" id="tab2">Вкладка 2</a>
    <a href="#" id="tab3">Вкладка 3</a>
    <div id="con_tab1" class="active">Содержимое 1</div>
    <div id="con_tab2">Содержимое 2</div>
    <div id="con_tab3">Содержимое 3</div>
</div>​

    $('#wrapper a').click(function() {
        var click_id=$(this).attr('id');
        if (click_id != $('#wrapper a.active').attr('id') ) {
            $('#wrapper a').removeClass('active');
            $(this).addClass('active');
            $('#wrapper div').removeClass('active');
            $('#con_' + click_id).addClass('active');
        }
    });​

Answer 6

Another option

Answer 7

jsfiddle.net/UWYxZ/
My version. jQuery could be written more elegantly, but I think the point is clear

Answer 8

“Is it possible to make CSS more concise?” - remove duplication in css, and give tabs the same classes.
On lists, tabs are much more semantic.

Answer 9

But are there tabs so that you can insert anchors and open the link not the first tab, but the one that the anchor refers to?

Answer 10

Well, use attributes like data-target="targettab" instead of hashes. The essence will still not change: you need to specify the target tab somewhere.

Answer 11

jsfiddle.net/gxy45/24/ like this
or like this jsfiddle.net/EZea3/ =)

Answer 12

Noscript in Firefox considers clicking on a taboo to be Clickjacking.