Keep tab active state, and open tab by default

Question

I've made a jsfiddle of my rough setup here:

a) My issue is I have tabs working fairly well, but it won't keep the active purple state once its clicked. I've tried a few solutions to no avail.

b) Additionally, I cant figure out how to have "item 1" tab open by default when you load the page.

I would like to avoid javascript if possible. Any thoughts would be great.

HTML

<p>
  <div class="tabbuttonsdiv">
    <a href="#item1" class="tabbuttons">item 1</a>
    <a href="#item2" class="tabbuttons">item 2</a>
    <a href="#item3" class="tabbuttons">item 3</a>
  </div>

  <div class="items">
    <p id="item1" class="tabcontent">... item 1...
    <p id="item2" class="tabcontent">... item 2...
    <p id="item3" class="tabcontent">...      
  </div>
</p>

CSS

div.items p {
    display: none;
}

div.items p:target {
    display: block;
}

.tabbuttons{
    color: #fff;
    background-color:#3195c1;
    border: none;
    padding: 10px;
}

.tabbuttons:hover {
    background-color:PURPLE;
}
.tabcontent{
    background: #ddd;
    min-height: 100px;
}

A final question if anyone is feeling generous:

c) At the moment I can't put div's or anything inside the "here" below:

<p id="item1" class="tabcontent">... "here"... </p>

It only seems to like text, and butchers anything I paste into it. Is their any easy way to remedy this?

Alan Files · Answer 1 · 2015-05-04T19:06:34.293

3

a) you can add an class="active" to the current active tab, to keep the color

b) you can use this same active class to show a tab by default.

c) you can't nest <div> under a <p>, but there's no reason you can't make your <p class="tabcontent"> into <div class="tabcontent">.

I've updated the fiddle: https://jsfiddle.net/9h5eqsuy/2/

edited May 04 '15 at 19:06

answered May 04 '15 at 14:20

Alan Files

318
1
9

How are you going to add the class `active` without Javascript (or jQuery)? This is what the OP wants and I'm actually really curious if it's possible :D – Rvervuurt May 04 '15 at 14:27
Oh! You could probably do it by using the same class on the button and the tab, and targeting on the class name, with css to change the background of the button. I'll see if I can mock it up. – Alan Files May 04 '15 at 15:29
1

So, I think the closest thing to the functionality for tabs without javascript is using radio buttons. I've tried to put something together like this, but it's very buggy. https://jsfiddle.net/9h5eqsuy/7/ Clicking the text will change the button/highlighting, but clicking the box will activate the anchor link... buggy. – Alan Files May 04 '15 at 16:14

score 3 · Answer 2 · answered May 04 '15 at 14:40

3

Since you tagged jQuery in your question, I came up with this solution.

CSS:

div.items p {display: none}
div.items p:first-child {display: block; } /* solution for b. */

.tabbuttons{
    color: #fff;
    background-color:#3195c1;
    border: none;
    padding: 10px;
}

.tabbuttons:hover {
    background-color:PURPLE;
}
.tabcontent{
 background: #ddd;
    min-height: 100px;
}

.activeTab { background-color:PURPLE } /* solution for a. */
.activeItem { display: block; }

jQuery

$(function() {    
    $('.tabbuttons').on('click', function() {
        $('.tabbuttons').removeClass('activeTab'); /* solution for a. */
        $(this).addClass('activeTab'); /* solution for a. */
        var i = $(this).attr('href');
        $('.items p').hide();
        $(i).show();
    });
});

Updated Fiddle

For question c.: use div's instead of paragraphs...

answered May 04 '15 at 14:40

GreyRoofPigeon

17,833
4
36
59

Thanks, this appears to be nearly working - though can you rewrite the jquery section to include the call for jquery? I can't seem to get the js working- in my setup I can only have one html file, one css file, and one js file. – jnapier May 04 '15 at 15:07
You indeed need jQuery for it. Add thus to the head section of your HTML file `` – GreyRoofPigeon May 04 '15 at 17:04
Sorry LinkinTED, I meant to say I cant include any js in my html, only a raw html file and raw js file. Can I include that code in a js file with your original js? – jnapier May 04 '15 at 23:35
http://stackoverflow.com/questions/950087/include-a-javascript-file-in-another-javascript-file – GreyRoofPigeon May 05 '15 at 06:11

score 0 · Answer 3 · answered May 08 '15 at 04:11

It is close but not quite there (and as I side note I probably would go a javascript option)

What you need to do is create a hierarchical relationship between your links and targets. To do this put the link and it's related target in a container. I've then used absolute positioning to position the targets in a stage container. I also keep item1 always displayed so it is present on page load, but has a lower z-index than the other items so they display on top of it.

Where this falls down is the itme1 tab is not highlited on page load

div.items p {
  display: none
}
div.items p:target {
  display: block
}
#stage {
  position: releative;
}
#stage>div {
  display: inline-block;
}
#stage .item {
  position: absolute;
  z-index: 10;
  display: none;
  left: 8px;
  width: 90%
}
#stage #item1 .item {
  display: block;
  z-index: 1;
}
#stage>div:target .item {
  display: block;
}
.tabbuttons {
  color: #fff;
  background-color: #3195c1;
  border: none;
  padding: 10px;
}
.tabbuttons:hover,
:target .tabbuttons {
  background-color: PURPLE;
}
.tabcontent {
  background: #ddd;
  min-height: 100px;
}

<div id="stage">
  <div id="item1">
    <a href="#item1" class="tabbuttons">item 1</a>
    <div class="item">
      <p class="tabcontent">... item 1...</p>
    </div>
  </div>
  <div id="item2">
    <a href="#item2" class="tabbuttons">item 2</a>
    <div class="item">
      <p class="tabcontent">... item 2...</p>
    </div>
  </div>
  <div id="item3">
    <a href="#item3" class="tabbuttons">item 3</a>
    <div class="item">
      <p id="item3" class="tabcontent">...</p>
    </div>
  </div>
</div>

Keep tab active state, and open tab by default

3 Answers3

Linked