asked on

Apply css style to tag contains another tag with class

Hello Experts!

I have code like so:

<table>
	<tr>
		<td><a href="#tab1" class="active">Weather forecast manager</a></td>
        	<td><a href="#tab2">ENC manager</a></td>
        	<td><a href="#tab3">List of lights manager</a></td>
		<td><a href="#tab4">Radio signals manager</a></td>
                ...
	</tr>
</table>

Open in new window

And I have jQuery code adding class="active" to chosen "a" tag.
What I need is CSS "td" tag contains "a" tag with class="active". I tried already

td[a.active] {
 background-color:#666;
}

Open in new window

...but doen't work for me.

Thanks for any help or hint.

Gurvinder Pal Singh

It should be

td a.active
{
background-color:#666;
}

Zado

ASKER

Yes, but in this case just 'a' tag is affected, I want to have 'td' tag affected, not sure it is possible, but should be I think. Thanks for quick reply.

So I want CSS (apply background mainly) to TD tag, which contain A tag with class="active". Mainly it's a bit weird, but it would resolve my problem.

Thanks.

ASKER CERTIFIED SOLUTION

Gurvinder Pal Singh

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Zado

ASKER

Excellent! My problem is almost resolved, I would be extremely grateful if you help me with the code below.
I applied your function to '//When page loads...' section so TD tag is affected, but I also need to apply it into '//On Click Event' section - remove the class and apply it into selected TD tag.

$(document).ready(function() {

	//When page loads...
	$("div.tab_content").hide(); //Hide all content
	$("td a:first").addClass("active").show(); //Activate first tab
	$("div.tab_content:first").show(); //Show first tab content
	$("a.active").each(function() {
   		var parent = $(this).parent().css("background-color", "#666");
	});

	//On Click Event
	$("td a").click(function() {

		$("td a").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$("div.tab_content").hide(); //Hide all tab content

		var activeTab = $(this).attr("href"); //Find the href attribute value to identify the active tab + content
		$(activeTab).fadeIn(); //Fade in the active ID content
		return false;
	});

});

Open in new window

Gurvinder Pal Singh

so what you want is, that if you remove the active class from inner anchor tag, then background-color of parent td should also be back to normal. And the td on which you have clicked should have that effect. please confirm

replace it with

//On Click Event
      $("td a").click(function()
      {

            $("td a").removeClass("active"); //Remove any "active" class
            $(this).addClass("active"); //Add "active" class to selected tab
            $(this).parent().siblings().css("background-color", ""); //resetting all tab colors
            $(this).parent().css("background-color", "#666");
            $("div.tab_content").hide(); //Hide all tab content

            var activeTab = $(this).attr("href"); //Find the href attribute value to identify the active tab + content
            $(activeTab).fadeIn(); //Fade in the active ID content
            return false;
      });

Zado

ASKER

That's great, works perfectly!
You actually answered my question in your second comment, but I needed to apply this function to my script, you've done it too, so thanks a lot for your time.

I attach full code for script I use, if someone's interested, it switches between tabs without reloading the page:

<!-- INDEX.HTML -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Pages</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="tabs.js" type="text/javascript"></script>
</head>

<body>
  
            <div class="menu">
                  <a class="first" href="#tab1">one</a>
                  <a href="#tab2">two</a>
                  <a href="#tab3">three</a>
                  <a href="#tab4">four</a>
            </div>
            
          	<div id="tab1" class="tab_content"><h1>1.first</h1></div>
            <div id="tab2" class="tab_content"><h1>2.second</h1></div>
            <div id="tab3" class="tab_content"><h1>3.third</h1></div>
            <div id="tab4" class="tab_content"><h1>4.fourth</h1></div>
            
</body>
</html>






<!-- TABS.JS -->

$(document).ready(function() {

	//When page loads...
	$(".tab_content").hide(); //Hide all content
	$("div.menu a:first").addClass("active").show(); //Activate first tab
	$(".tab_content:first").show(); //Show first tab content

	//On Click Event
	$("div.menu a").click(function() {

		$("div.menu a").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$(".tab_content").hide(); //Hide all tab content

		var activeTab = $(this).attr("href"); //Find the href attribute value to identify the active tab + content
		$(activeTab).fadeIn(); //Fade in the active ID content
		return false;
	});

});

Open in new window

Gurvinder Pal Singh

thanks for the detailed answer and tip