Home/ Questions/Q 8692407
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T00:18:29+00:00

Jsfiddle: http://jsfiddle.net/87YGW/ At present I have to click tab 1 to show content however

  • 0

Jsfiddle: http://jsfiddle.net/87YGW/

At present I have to click tab 1 to show content however I want tab 1 content to display automatically upon opening the page.

HTML:

<div id="tab2" class="css-tabs">
        <ul class="noint11_menu">
            <li id="item-1"> <a href="#item-1">Tab 1</a>
                <div>tab conten1
                   </div>
            </li>
            <li id="item-2"> <a href="#item-2">Tab 2</a>
                <div>
                    <p>Tab Content 2</p>
                </div>                
            </li>
            <li id="item-3"> <a href="#item-3">Tab 3</a>
                <div id="notice">
                    <p>tab content 3 </p>
                </div>
            </li>
            <li id="item-4" title="click for Tab 4"> <a href="#item-4">Tab 4</a>
                <div>
                    <p>Tab Content 4</p>
                </div>
            </li>
        </ul>
    </div>​

CSS:

.css-tabs {
    position: relative;
    text-align: left; /* This is only if you want the tab items at the center */
    height: auto
}
.css-tabs ul.noint11_menu {
    list-style-type: none;
    display: inline-block; /* Change this to block or inline for non-center alignment */
}
.css-tabs ul.noint11_menu > li {
    display: block;
    float: left;
}
.css-tabs ul.noint11_menu li > a {
    color: #EEEEEE;
    text-shadow: 1px 1px 1px #000;
    font-family: 'MuliLight', Arial, sans-serif;
    font-size: 14px;
    text-decoration: none;
    display: block;

}
.css-tabs ul.noint11_menu li > div {
    display: none;
    position: absolute;
    width: 100%;

}
.css-tabs ul.noint11_menu li > div > p {
    border: transparent;
    padding: 10px;
    margin: 0;
}
.css-tabs ul.noint11_menu li > a:focus {
    border-bottom: 1px solid #fff;
}
.css-tabs ul.noint11_menu li:target > a {
    cursor: default;
    border-bottom: 1px solid #fff;
}
.css-tabs ul.noint11_menu li:target > div {
    display: block;
}​

I cannot use Javascript, Jquery or iframe

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I cannot demo it in the fiddle (because iframe), but if you link to the first tab directly, eg: http://www.yoururl.com/page#item-1, the first tab’s content will be visible on page load.

    You can test this by putting all your code inside a new blank html file (CSS and markup in their correct places) and saving it as “test.html”. Then make another html file inside the same folder with this code:

    <html>
  <body>
    <a href="test.html#item-1">link</a>
  </body>
</html>

    Save and open the second file and click the link to go to your styled page. Note the first tab’s content is visible, and tab switching still works as expected.

    Without JS to redirect or to change the window location, I don’t believe you can get the same result through CSS alone.

    This article explains why it works: The :target pseudo selector in CSS matches when the hash in the URL and the id of an element are the same.

    edit to add another hacky, but pure CSS “solution”:

    Make the first tab always visible with #item-1 div {display: block}, and set a background colour on all tabs:

    .css-tabs ul.noint11_menu li > div {
    display: none;
    position: absolute;
    width: 100%;
    left: 0;
    color: #ccc;
    text-align: left;
    padding: 0;
    margin-left: 32px;
    background: #fff; /* added this */
}

    Now the other tabs will hide the first tab when they are selected. demo: http://jsfiddle.net/87YGW/3/

    • 0