Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS Tab Content (n00b)

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #44936
    jparker
    Member

    I followed the link for the tabs with the rounded edges, located here : https://css-tricks.com/better-tabs-with-round-out-borders/. Since I am new, I have no idea how to add unique content for each tab. From what I have seen online you make the href=”#something” then define the something target in a div but I have never been able to get it to work. It either shows the text for all the tabs on all the tabs or shows nothing … Help !

    #135873
    Paulie_D
    Member

    We’d need to see your code.

    Could you replicate it in Codepen?

    #135897
    jparker
    Member

    The code is directly from this website with the link I posted earlier. Here is the demo of it:
    https://css-tricks.com/examples/RoundOutTabs2/. It currently has href=”#” as the target for the tabs. I am just trying to figure out how to include stuff on each page (text, etc)

    #135902
    unasAquila
    Participant

    try [this](http://codepen.io/unasAquila/pen/nDjgI).

    On a side note the reason people ask for example codepens is to see if there is something missing or conflicting in your code

    #135906
    jparker
    Member

    It still does not work I must be missing something. When I render this everything comes out on the same tab and repeats for every tab I select. I put it on code pen here :

    http://codepen.io/jparker/pen/icyBJ

    #135923
    unasAquila
    Participant

    try [this](http://codepen.io/unasAquila/pen/fgxBn) it is all in the html tab so you can see exactly whats there.

    #124866
    jparker
    Member

    That seemed to work. However, I ran into another issue because I want to have a div of tabs on the top of the screen and the bottom of the screen and have them work independent of each other. When I attempt to do this, the bottom tab shows the selected fine but when you click the second bottom tab it still shows the first tabs content and when you change the tabs on the top they clear out the ones in the bottom. I made a separate JavaScript function for the bottom tabs but I think it is conflicting some how.

    Here is the code pen of the problem:

    http://codepen.io/jparker/pen/jJlIb

    #135998
    unasAquila
    Participant

    Basicaly you need to target the `li`’s in the `div` section you want to target take a look at this [Fork](http://codepen.io/unasAquila/pen/DbdEm)

    #136003
    jparker
    Member

    That worked ! Thanks unasAquila.

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.