PDA

View Full Version : Tabbed Panel



philips
07-27-2012, 08:54 PM
Hello guys,

I am trying the create a functioning tabbed panel for my blog. So far, I was able to do the HTML and CSS part. However the tabs don't work i.e. they are not clickable. Any advice will be greatly appreciated. Thank you.

bernie1227
07-28-2012, 09:16 AM
Could we possibly see your code? If you want to just hijack some javascrit for it, here is a list of some good tabs:
http://speckyboy.com/2010/09/08/30-css-and-javascript-tabs-solutions/

philips
07-29-2012, 04:20 PM
Hi friend,

Many thanks for your reply. :) Please find attached the HTML code.
What would you recommend?







PS. I have read that CSS3 is not fully supported.

philips
07-29-2012, 04:34 PM
The tabbed panel would look like the attached picture. The HTML code I attached gives this result except that the tabs are not clickable :rolleyes:

bernie1227
07-29-2012, 09:32 PM
Ok, so what you want to do, is use this code: (I've used jquery for a nice little fade effect.:
So depending on the name of each tab and piece of content, put:


$("#div-one").click(function(){
$("#content-two").fadeOut(500);
$("#content-one").fadeIn(500);
});


$("#div-two").click(function(){
$("#content-one").fadeOut(500);
$("#content-two").fadeIn(500);
});

In the JavaScript. In this, #div-one and #div-two should be the id's of the tabs, and content-one content-two should be the id's of the content, the one with the fade in command has to be the one you want to appear when you click the tab. You can add this more times for as many tabs as you like.
Remember to reference the jquery library in the head:


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

philips
07-29-2012, 10:19 PM
Lovely idea with the fade in effect... Thank you so much... please forgive my clumsiness if I ask you where I need to place this code as I am new to JQuery and JavaScripting... but I am learning a lot.... I know of course where to place the HTML code ;)

bernie1227
07-29-2012, 10:29 PM
That's perfectly fine, you will need to place the jquery inside:


<script type="text/javascript">
// code
</script>

Tags in the head of the page. The reference to the jquery library also has to go in the head. Also, don't forget to change the names of the divs referenced in the code appropriately to your HTML.

philips
07-29-2012, 10:31 PM
Thank you so much. :) I'll work on it and will revert back to you.

philips
07-30-2012, 12:57 PM
Working on it.

philips
07-30-2012, 01:14 PM
Ok, I added the codes inside the head tag.
I am trying to make the code reference to the HTML and I'm having difficulty. Here is what I've done so far, and it is not working :o


<script type="text/javascript">
$("#tabs").click(function(){
$("#tab-pop").fadeOut(500);
$("#tab-latest").fadeIn(500);
});


$("#tabs").click(function(){
$("#tab.comm").fadeOut(500);
$("#tab-tags").fadeIn(500);
});

</script>

Will be grateful for your help