Tabbed Content / Posts /

Change class name

Hello, thanks a lot for this great job.
The source code contains some class as follow:

<ul class="tabs">
<div class="tabcontents">
<div id="view1" class="tabcontent">

Unfortunately, those 3 classes (tabs, tabcontents, tabcontent) have been already used in my existing code. How to change those classes name (eg. become xxtabs, xxtabcontents, xxtabcontent) while keeping the javascript works?

Thanks a lot..
Guldan  6 years ago   viewed: 3453    

6 Answers

You can surely change the class names. You should also update the CSS selector accordingly in your tabcontent.css file.
milo   6 years ago
Hi milo, thanks for the response.
But CSS is only responsible for the layout, not the behavior of the tab/slider. Yes, we can change the class name as long as we update the CSS, and the layout will keep intact.
The original href of the link is "#". If we change the class name, it seems that the javascript no longer controlling the tab.
So when you click the tab title, instead of showing the tab content, it will go to (back to the beginning of the page).
I'm sure it's the javascript part that we have to alter, but I don't know which part..
  6 years ago
Search the tabcontent.js for: if(b(e[d],"tabs"))
And replace the "tabs" with your new "xxtabs"
milo   6 years ago
Hi milo, thanks a lot, it works! :)
And how about the class "tabcontents" and "tabcontent"? I can't find those 2 classes in the tabcontent.js file.
Currently I also change those 2 classes to be "xxtabcontents" and "xxtabcontent" (and alter the CSS part accordingly).
It still works anyway.
Perhaps the tabcontent.js is only dealing with "tabs" class (and don't care with the rest classes)?

Thanks a lot!
  6 years ago
The tabcontent.js concerns the "tabs" class and the tabcontent.css concerns the class "tabcontents" and "tabcontent".

FYI, the Tab Content will be re-written in May 2013 and this post will not be valid anymore for the new release.
milo   6 years ago
Thanks a lot for the clarification. Very useful!
  6 years ago


Your name*
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question: