2

How to make tabs on the web page so that when click is performed on the tab, the tab gets css changed, but on the click page is also reloaded and the css is back to original.

Improve this question
2
  • The first part's relatively easy (the tab gets css changed), but I have no idea what you mean by "on the click page is also reloaded and css is back to original.' Can you clarify this? Commented Feb 6, 2011 at 11:21
  • Yes on the click the tab I add it some css class and it becomes different from other tabs, but that tab is also a link and the click reloads the page and the class that I have just added is gone, and the clicked tab is no different then others. Commented Feb 6, 2011 at 14:10

5 Answers 5

Reset to default
4

dont use the jquery :D

all of what you needs a container, a contained data in a varable and the tabs

the container is the victim of the css changes. the tabs will trigger the changing process.

if you have a static content, you can write this into a string, and simply load it from thiss. if you have a dinamically generated content, you need to create ajax request to get the fresh content, and then store it in the same string waiting for load.

with the tabs you sould create a general functionusable for content loading.

function load(data) { document.getElementById("victim").innerHTML = data; } function changeCss(element) { //redoing all changes document.getElementById("tab1").style.background="#fff"; document.getElementById("tab2").style.background="#fff"; element.style.background = "#f0f"; }

with static content the triggers:

document.getElementById("tab1").onclick = function() {load("static data 1");changeCss(document.getElementById("tab1"))}; document.getElementById("tab2").onclick = function() {load("static data 2");changeCss(document.getElementById("tab2"))};

if you want to change the css, you need another function which do the changes.

i tell you dont use the jquery because you will not know what are you doing.

but thiss whole code can be replaced by jquery like this:

$("tab1").click(function(e) { $("#tab1 | #tab2").each(function() { $(this).css("background","#fff"); }); $(this).css("background","#00f"); $("#victim").append("static content 1"); }); $("tab12click(function(e) { $("#tab1 | #tab2").each(function() { $(this).css("background","#fff"); }); $(this).css("background","#00f"); $("#victim").append("static content 2"); });

if you know how javascript works then there is noting wrong with the jquery, but i see there is more and more people who just want to do their website very fast and simple, but not knowing what are they doing and running into the same problem again and again.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

Jquery UI Tabs:

http://jqueryui.com/demos/tabs/

Improve this answer

2 Comments

Why on earth would you import the jQuery UI library for tabs? That's doable with plain CSS (though admittedly with some minor problems in IE).
Yes, I also suggest jQuery UI Tabs. They have a cookie persistence feature that will take care of the reloaded/resetting css problem.
0

Have a <A href tag around the "tab" and use onClick to fire some Javascript that changes the CSS.

Improve this answer

1 Comment

fehergeri's answer is the way to go.
-1

If you do not want use Jquery for creating of UI tabs, please see my cross-browser JavaScript code: GitHub.

  • You can use different ways to create tabs and tab content.
  • Tab content can added only when tab gets focus.
  • You can remember selected tab. Selected tab opens immediatelly after opening of the page.
  • You can create tabs inside tab.
  • Custom background of the tab is available.

Example: Tabs

Improve this answer

Comments

-1

I made a complete JavaScript library on creating, manipulating and removal of tabs along with numerous utility methods. I will provide a simple example for adding non-swipable tabs but there are other types of tabs in the library as well. THE DOCUMENT MUST AT LEAST HAVE A HEAD AND A BODY

#sampleContainerElement{ display: table; height: 50vh; width: 50vw; margin: 2vh auto; border: solid 1px gold; border-radius: 2vh; background-color: black; }
<div id="sampleContainerElement"> <!--This is the container view. Container view must be empty and must not be modified directly--> </div> <script type="module"> import { addNonSwipableTabs } from "https://anville95work.github.io/scripts/JavaScriptTabsLibrary.js"; let firstTab = document.createElement("div"); firstTab.innerHTML = "This is the first tab"; firstTab.style.textAlign = "center"; firstTab.style.color="white"; let secondTab = document.createElement("div"); secondTab.innerHTML = "This is the secondTab"; secondTab.style.textAlign = "center"; secondTab.style.color="white"; let thirdTab = document.createElement("div"); thirdTab.innerHTML = "This is the thirdTab"; thirdTab.style.textAlign = "center"; thirdTab.style.color="white"; let fourthTab = document.createElement("div"); fourthTab.innerHTML = "This is the fourthTab"; fourthTab.style.textAlign = "center"; fourthTab.style.color="white"; let fifthTab = document.createElement("div"); fifthTab.innerHTML = "This is the fifthTab"; fifthTab.style.textAlign = "center"; fifthTab.style.color="white"; let sixthTab = document.createElement("div"); sixthTab.innerHTML = "This is the sixthTab"; sixthTab.style.textAlign = "center"; sixthTab.style.color="white"; let tabsObjectsArray = [firstTab, secondTab, thirdTab, fourthTab, fifthTab, sixthTab]; let tabNamesArray = ["first tab", "second tab", "third tab", "fourth tab", "fifth tab", "sixth tab"]; addNonSwipableTabs("sampleContainerElement", tabsObjectsArray, tabNamesArray); //showDocumentation()//call to show documentation. it's very short but important </script>

You can download the script here.

Please note that there are other types of tabs in the library as well. To see them, please take a look at the documentation. The DOCUMENTATION IS VERY SHORT, ONLY TWELVE SHORT STEPS. Viewing the documentation will enable you to choose the type of tabs that best suits your use-case

For documentation, call showDocumentation() from your own script after referencing the above script. Here's an example of viewing the documentation

documentation-page.html

 <script type="module"> import { showDocumentation } from "https://anville95work.github.io/scripts/JavaScriptTabsLibrary.js"; showDocumentation();//This opens up a popup with the documentation </script>

test.js is the example of your script. This will open a popup which shows a brief complete usage explanation. Thank you, good luck.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.