Tab Content Script (v 2.2) styling active tab

**Foundas** · 03-23-2013, 07:02 PM

1) Script Title: Tab Content Script (v 2.2)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tabcontent.htm

3) Describe problem:

hello guys

i am using the above script with content for 2 tabs. The actual tabs are hidden and i use 2 links on the same page to open each of these tabs
i.e. <a href="javascript:exampletabs.expandit(0)"> and <a href="javascript:exampletabs.expandit(1)">

is there a way to add styling on these links so the user can see which tab is actually active? for instance, the active tab to have different colour

thanks in advance for your help

**ajfmrf** · 03-23-2013, 07:41 PM

Please post a link to the page on your site that contains the problematic script so we can check it out.

It will help get answers / assistance faster

**Foundas** · 03-23-2013, 08:19 PM

Here is the code,

<head>
<link rel="stylesheet" type="text/css" href="tabcontent/tabcontent.css" />
<script type="text/javascript" src="tabcontent/tabcontent.js"></script>
</head>

Code:

<a href="javascript:businestabs.expandit(0)">Click here for Tab-1</a><span style="padding:0 10px 0 10px;">|</span><a href="javascript:businestabs.expandit(1)">Click here for Tab-2</a>
<div id="default1" class="tabcontent">
	<div class="box1">
		<div class="wrapper">
			<div class="text">Content of tab1</div>
			this is the content for tab1
		</div>
	</div>
</div>
<div id="default2" class="tabcontent">
	<div class="box1">
		<div class="wrapper">
			<div class="text">Content of tab2</div>
			this is the content for tab2
		</div>
	</div>
</div>
<div id="businesstabs" style="display:none;">
	<ul>
		<li><a href="#" rel="default1" class="selected"></a></li>
		<li><a href="#" rel="default2"></a></li>
	</ul>
</div>
<script type="text/javascript">
	var businestabs=new ddtabcontent("businesstabs")
	businestabs.setpersist(false)
	businestabs.setselectedClassTarget("link")
	businestabs.init()
</script>

thanks

**ajfmrf** · 03-24-2013, 07:36 PM

you would use css to do that

**ajfmrf** · 03-24-2013, 07:43 PM

In that css page there is this part for the selected tab:

Code:

.shadetabs li a.selected{ /*selected main tab style */
background-image: url(shadeactive.gif);
border-bottom-color: white;
}

It uses a different image to show what tab you are on(red in the code).it also uses white to make it easier to see a difference.

What do you want to do?

**Foundas** · 03-24-2013, 08:42 PM

Hi Bud,

i am not using the "li" items to navigate through the tabs. As you can see, i have them display:none;

i use these 2 links to navigate through the tabs
<a href="javascript:businestabs.expandit(0)">Click here for Tab-1</a><span style="padding:0 10px 0 10px;">|</span><a href="javascript:businestabs.expandit(1)">Click here for Tab-2</a>

is there a way to style these 2 links so which ever is the active tab (either 'Click here for Tab-1' or 'Click here for Tab-2') to have different colour?

**ajfmrf** · 03-24-2013, 09:18 PM

Please post a link to the page on your site that contains the problematic script so we can check it out.

To see everything would be much easier

**Foundas** · 03-24-2013, 09:45 PM

Hi, you can find the script here:

http://www.web-conceptions.com/test.asp

**ajfmrf** · 03-25-2013, 01:05 AM

Here is what my google came up with

https://www.google.com/search?q=styl...ient=firefox-a

You probally will need to use a div/p/or something like that to use the a:active attribute(I hope I used the right word-lol) for the results you want

**Beverleyh** · 03-25-2013, 10:18 AM

Originally Posted by Foundas

i am not using the "li" items to navigate through the tabs. As you can see, i have them display:none;

Why not just use the default <li> navigation but style them to look like links/buttons/whatever, rather than tabs? They are tied to the "selected" class in the CSS so you can style them how you want;

Code:

#businesstabs li a.selected{
border: 0;
color: red;
}

Thread: Tab Content Script (v 2.2) styling active tab

Thread Tools

Search Thread

Tab Content Script (v 2.2) styling active tab

The Following User Says Thank You to Beverleyh For This Useful Post:

Similar Threads

CSS styling help needed for Dynamic Drives tab content script

Resolved Script/css to open content on same page-and highlight active content.

Styling content within Iframe

Styling Tab Content Script

Tab Content Script -- remove bottom border on active tab

Bookmarks

Bookmarks

Posting Permissions