Home/ Questions/Q 9275065
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T16:30:05+00:00

How can the background be changed to the exact same color when the tab

  • 0

How can the background be changed to the exact same color when the tab is clicked on? Currently, it just remains the same color. Also would it be possible to have the first tab colored the same as the background color of the content area when the page is loaded?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS-TABS | CSS-Only "DOM TABS"</title>

<style type="text/css">

    #pagewidth { width: 760px; margin: 0 auto 0 auto; }

    #navigation { margin: 0 10em 0 0; background: #000000; color: #FFFFFF; }
    #navigation li { display: inline; padding: 0 2em 0 2em; }

    .content { background: #CCCCCC; height: 20em; padding: 1em;}

    a { color: #0066FF; }
    a:hover { color: #00CCFF; }
    a:active { font-weight:bold; }

    #container { height: 20em; overflow: hidden; }

</style>

</head>

<body>

<div id="pagewidth">

    <ul id="navigation">
        <li><a href="#c1">Content Block 1</a></li>
        <li><a href="#c2">Content Block 2</a></li>
        <li><a href="#c3">Content Block 3</a></li>
    </ul>

    <div id="container">

        <div class="content">
            <a name="c1" id="c1"></a>
            <h1>Heading 1</h1>
            <p>Here is some content, I hope that you like it!</p>
        </div>

        <div class="content">
            <a name="c2" id="c2"></a>
            <h2>Heading 2</h2>
            <p>Now that you have read content block 1, you can learn more in this block</p>
        </div>

        <div class="content">
            <a name="c3" id="c3"></a>
            <h3>Heading 3</h3>
            <p>In conclusion, content blocks are fun</p>
        </div>

    </div> <!-- end container -->

</div> <!-- end pagewidth -->

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You just need a little more HTML, and a little more CSS, like so:

    CSS Added:

    .content .sub{ height: 20em; padding: 1em; }
...
#sub1{ background: blue; }
#sub2{ background: green; }
#sub3{ background: yellow; }

    And:

    <div class="sub" id="sub1">...</div>

    … as wrappers for the tab contents.

    The final page would look like this:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS-TABS | CSS-Only "DOM TABS"</title>
<style>
    #pagewidth { width: 760px; margin: 0 auto 0 auto; }

    #navigation { margin: 0 10em 0 0; background: #000000; color: #FFFFFF; }
    #navigation li { display: inline; padding: 0 2em 0 2em; }

    .content { background: #CCCCCC; }
    .content .sub{ height: 20em; padding: 1em; }

    a { color: #0066FF; }
    a:hover { color: #00CCFF; }
    a:active { font-weight:bold; }

    #container { height: 20em; overflow: hidden; }

    #sub1{ background: blue; }
    #sub2{ background: green; }
    #sub3{ background: yellow; }
</style>
</head>
<body>
<div id="pagewidth">

<ul id="navigation">
    <li><a href="#c1">Content Block 1</a></li>
    <li><a href="#c2">Content Block 2</a></li>
    <li><a href="#c3">Content Block 3</a></li>
</ul>

<div id="container">

    <div class="content">
        <a name="c1" id="c1"></a>
        <div class="sub" id="sub1">
        <h1>Heading 1</h1>
        <p>Here is some content, I hope that you like it!</p>
        </div>
    </div>

    <div class="content">
        <a name="c2" id="c2"></a>
        <div class="sub" id="sub2">
        <h2>Heading 2</h2>
        <p>Now that you have read content block 1, you can learn more in this block</p>
        </div>
    </div>

    <div class="content">
        <a name="c3" id="c3"></a>
        <div class="sub" id="sub3">
        <h3>Heading 3</h3>
        <p>In conclusion, content blocks are fun</p>
        </div>
    </div>

</div> <!-- end container -->

</div> <!-- end pagewidth -->

</body>
</html>

    Here is a JSFiddle showing how it works: http://jsfiddle.net/fDk3z/

    • 0