PDA

View Full Version : 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/dynamicindex17/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>



<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:



.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=styling+a+link&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=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
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;

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

Foundas
03-25-2013, 10:43 AM
Hi Beverleyh,

thanks...your suggestion worked. i used <span> istead of <li> and problem solved :)

Beverleyh
03-25-2013, 12:35 PM
Good stuff :)