CSS 26    CSS3 10    HTML 2    JavaScript 43    Wordpress 3    Блог 10    Инструменты 1    Не советую 1    Полезные ресурсы 4    Счетчики 1    Шпаргалки 6    Зарегистрироваться 293   Войти

Меню

Добро пожаловать, Гость! Вы можете Войти или Зарегистрироваться.

Вкладки (табы) на CSS очень просты, но и область их применения не широка, а всё из-за ссылок якорей. Смотрите сами в примере.
1. CSS

* {
	margin: 0;
	padding: 0
	}
#content .tabs {
	font-family: Georgia;
	font-size: 12px;
	line-height: 30px;
	list-style: none;
	overflow: hidden;
	height: 30px;
	}
#content .tabs a {
	float: left;
	background: #eee;
	padding: 0 15px;
	text-decoration: none;
	height: 30px;
	}
#content .tabs a:hover {
	background: #ddd;
 }
#content .tabs-content {
	width: 960px;
	height: 300px;
	overflow: hidden;
	}
#content .tabs-content ul {
	list-style: none;
	text-align: center;
	line-height: 300px;
	font-size: 150px;
	}
#content .tabs-content ul li {
	width: 960px;
	height: 300px
	}
#content .tabs-content ul #one {
	background: #b0a200;
	}
#content .tabs-content ul #two {
	background: #00aab0;
	}
#content .tabs-content ul #three {
	background: #b00095;
	}
#content .tabs-content ul #four {
	background: #78b000;
	}
#content .tabs-content ul #five {
	background: #b03200;
	}

2. HTML

<div id="content">
	<ul class="tabs">
		<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>
	<div class="tabs-content">
		<ul>
			<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>
</div>

Демо

Рекламная пауза

» 2 комментария

  1. прошу прощения )))
    как сделать чтоб нажатие на ссылку прописанную вот тут a href=”#one” не прокручивало окно до состояния когда id=”one” оказывается вверху окна браузера??? Спасибо!


Оставить комментарий