- This topic is empty.
-
AuthorPosts
-
May 21, 2013 at 11:41 am #44936
jparker
MemberI 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 !
May 21, 2013 at 11:45 am #135873Paulie_D
MemberWe’d need to see your code.
Could you replicate it in Codepen?
May 21, 2013 at 3:50 pm #135897jparker
MemberThe 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)May 21, 2013 at 4:22 pm #135902unasAquila
Participanttry [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
May 21, 2013 at 4:52 pm #135906jparker
MemberIt 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 :
May 21, 2013 at 5:22 pm #135923unasAquila
Participanttry [this](http://codepen.io/unasAquila/pen/fgxBn) it is all in the html tab so you can see exactly whats there.
May 22, 2013 at 7:35 am #124866jparker
MemberThat 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:
May 22, 2013 at 9:58 am #135998unasAquila
ParticipantBasicaly 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)
May 22, 2013 at 10:23 am #136003jparker
MemberThat worked ! Thanks unasAquila.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.