[JavaScriptBank]

Without JavaScript, we can still switch web content with CSS. It's so incredible but it's so true, just click into this free HTML example code, for testing it by yourself, to find how to make <a href=... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript Web CSS Content Switcher Without JavaScript

How to setup

Step 1: Copy & Paste CSS code below in your HEAD section
CSS

<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

img {
	border: none;
}

h1 {
	line-height: 1em;
	font-family: "Times New Roman", Times, serif;
	color: #666;
	font-style: italic;
	text-align: center;
	padding: 30px 0 0 0;
}

h2 {
	font-family: Arial, Helvetica, sans-serif;
	margin: 0 0 8px 0;
}

h3 {
	font-family: Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
}

p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	line-height: 1.5em;
	margin: 0 0 14px 0;
	padding: 30px 0 0 0;
	clear: both;
	text-align: center;
	color: #666;
}

#content-slider {
	width: 650px;
	overflow: hidden;
	height: 300px;
	margin: 30px 0 0 0;
	border: solid 1px #666;
}

#content-slider-inside {
	list-style: none;
	height: 320px;
	overflow: scroll;
	overflow-y: hidden;
}

	#content-slider-inside li {
		width: 650px;
		background: #ccc;
		height: 300px;
		color: #666;
		font-size: 200px;
		font-family: "Times New Roman", Times, serif;
		font-style: italic;
		text-align: center;
		line-height: 300px;
	}
	
#navigation {
	list-style: none;
	margin: 20px 0 0 0;
	float: right;
}

#navigation li {
	float: left;
	width: 30px;
	height: 30px;
	text-align: center;
	margin: 0;
	border: solid 1px #ccc;
	line-height: 30px;
	font-family: Arial, Helvetica, sans-serif;
	margin: 0 0 0 5px;
}

#navigation li a, #navigation li a:link, #navigation li a:visited {
	text-decoration: none;
	display: block;
	height: 30px;
	color: #666;
}

#navigation li a.selected, #navigation li a.selected:link, #navigation li a.selected:visited {
	background: #666;
	color: #fff;
}

#navigation li a:hover, #navigation li a:focus, #navigation li a:active {
	background: #666;
	color: #fff;
}
</style>

Step 2: Place HTML below in your BODY section
HTML

<div style="margin: 0pt auto; width: 650px;">

<h1>A JavaScript Content Switcher That Works Without JavaScript</h1>

	<div id="content-slider">
		<ul id="content-slider-inside">
			<li id="one">1</li>
			<li id="two">2</li>
			<li id="three">3</li>

			<li id="four">4</li>
			<li id="five">5</li>
		</ul>
	</div>
	
	<ul id="navigation">
		<li><a href="#one">1</a></li>
		<li><a href="#two">2</a></li>

		<li><a href="#three">3</a></li>
		<li><a href="#four">4</a></li>
		<li><a href="#five">5</a></li>
	</ul>

<p>This page has no JavaScript, but the content switcher above is fully functional, and even allows deep linking.</p>

<p>JavaScript can now be added as an enhancement to make the content slide, fade, or animate.</p>

<p><a href="http://www.javascriptbank.com/how-create-web-css-content-switcher-without-javascript.html">View the same page with JavaScript/jQuery enhancing it.</a></p>

<p><a href="http://www.javascriptbank.com/how-create-web-css-content-switcher-without-javascript.html">&lt; Go back to the tutorial</a></p>

</div>

JavaScript Bookmark Page script - JavaScript Color Wheel - JavaScript Image slideshow