How to make all links clickable in pure CSS tabs

I’ve modified code found on this article: http://www.sitepoint.com/you-dont-need-javascript-for-that/

The problem is my link is unclikable on tab 2. How do I do it clickable.
Here’s the code, I past the whole thing so you can easily check it:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Pure CSS Tabs</title>
		<style>
			.tabs { display: inline-block; margin-right: 25px;}
			.tabs input[type="radio"]{ display: none; }
			.tabs input:checked + a + ul {
				display: block;
				position: absolute;
				left: 0;
				top: 30px;
			}
			.tabs a:focus  + ul {
				display: block;
				position: absolute;
				left: 0;
				top: 30px;
				width: 100%;
				min-height: 350px;
				height: auto !important;
				background: #fff;
			}
			.tabs ul {
				display: none;
				width: 100%;
			}
			.tabs ul li { display: inline; margin-right: 10px; }
		</style>
	</head>
	<body>
		<div class=wrap>
			<div class=tabs tabindex=0>
				<input checked=checked type=radio />
				<a href='#' role=button>Tab 1</a>
				<ul>
					<li><a href='home.php'>Link on tab 1</a></li>
				</ul>
			</div>
			<div class=tabs tabindex=0>
				<input type=radio />
				<a href='#' role=button>Tab 2</a>
				<ul>
					<li><a href='index.php'>Link on tab 2</a></li>
				</ul>
			</div>
		</div>
	</body>
</html>

Thank you,

The first tab is never going away; you by default have the checked state active in your HTML and in your CSS you have the first tab always show. Seems like this is going to be awkward to fix at this state.

You don’t seem to be following their example so if you want the tabs, could you redo it to more closely match their code?

Don’t use the :focus method because as soon as you click into the tab the focus is lost and you end up in tab1. If you must use css only for this then the :checked + method is more reliable (although it may not be semantically correct as it is basically a hack). Behavior like this is best left to js in most cases.

Thanks for advice,

The example doesn’t fit my need. It won’t show the first tab at start.

Maybe I should start it over.

I don’t think the author has though this through properly (or anyone else for that matter) but the :focus method is only good for content that doesn’t have links (apart from the first tab of course). :smile:

It’s also very disconcerting when the content disappears when you focus or interact with another element in the page. The :checked method doesn’t suffer from this but of course the semantics are not really correct as form elements (apart from the button element) should only be used in forms.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.