Jsfiddle: http://jsfiddle.net/87YGW/
Presently, to display content for tab 1, I have to click on it. However, I want the tab 1 content to be shown automatically when the page is opened.
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 am unable to utilize Javascript, Jquery, or iframe