Default :target with CSS
I have this CSS:
<style type="text/css">
.tab {
display: none;
}
.tab:target {
display: block;
}
</style>
And this HTML:
<div class="tab_container">
<ul class="tabs">
<li><a href="#updates-list">List</a></li>
<li><a href="#updates-map">Map</a></li>
</ul>
<ul class="tab list" id="updates-list">
Eh.. Hello!
</ul>
<div class="tab map" id="updates-map"></div>
</div>
However, my page is empty if no target (# in URL) is specified and no tab is clicked yet. I want to show ul#updates-list by default.
How can I d开发者_JS百科o this? Thanks.
Update: Next to this, my Google Map is broken if it is not the initial target. Does anyone know a fix?
Spontaneously I'd have to say that the only solution I can think of is unfortunately using JavaScript. Something like:
<script type="text/javascript">
if (document.location.hash == "" || document.location.hash == "#")
document.location.hash = "#updates-list";
</script>
EDIT:
Ok, got a CSS solution. This however requires the default entry #updates-list to be placed last (after #updates-map and any other tabs you may add):
.tab, .tab:target ~ #updates-list {
display: none;
}
#updates-list, .tab:target {
display: block;
}
I know this is an old question, but it's still relevant and I have another suggestion:
<a href="#tab1">Tab 1</a>
<a href="#tab2">Tab 2</a>
<a id="tab1"></a>
<a id="tab2"></a>
<div class="tab tab1 default-tab">Some content</div>
<div class="tab tab2">Some other content</div>
and the css:
.tab {display:none}
.default-tab {display:block}
:target ~ .default-tab {display:none}
#tab1:target ~ .tab1,
#tab2:target ~ .tab2 {
display: block
}
This lets you have the tabs ordered however you want, but if you're generating the html dynamically you'll need to generate the css dynamically. Or else choose a maximum number of tabs to support when you write the css.
I guess what you would want to do is select something like .tab_container:not(> :target) > .default to display the default tab when no one is targeted. However, this is not possible since the :not() pseudo-class only takes simple selectors (i.e. just :target, not > :target, in which case you would check the target of the container, not the children).
I would do either of the following:
Use Javascript to set the target to the first tab at load (or just require that the anchor is present).
Add a specific override class for the first active tab and remove it (again with Javascript) after the first tab switch.
The first alternative will mess with the browser history while the second will be a bit more of a code mess. I can't think of a "perfect" solution right now. Maybe you're better off just using Javascript altogether to detect the current target in order to both get compatibility with non-CSS3 browsers and to solve this particular issue in a somewhat clean way?
This seems to be the shortest answer I could find:
location=location.hash||"#updates-list"
This simply redirects the user to a valid hash if it is currently nonexistent or empty #.
~98% of users have JavaScript enabled, so a JS solution shouldn't really be a problem.
Useful:
.tab#tabControl { display:block; }
.tab:not(:target) { display:none; }
.tab:target ~ #tabControl { display:none; }
This is not a pure CSS solution, but it uses one tiny bit of JavaScript that vastly simplifies the all the code:
location=location.hash||"#one"
(Thanks to: https://stackoverflow.com/a/32470599/1282216)
Here's minimalist SPA (Single Page Application) that demonstrates this. The first "page" is visible right away, but then hidden when the other links are clicked
<!doctype html>
<title>personal web page</title>
<style>
section:target {
display: block;
}
section {
display: none;
}
</style>
<h1>About me</h1>
<nav>
<a href="#one">Travel</a>
<a href="#two">Hobbies</a>
<a href="#three">Links</a>
</nav>
<section id="one">
<h2>Travel</h2>
<p>Places I like to travel to.</p>
</section>
<section id="two">
<h2>Hobbies</h2>
<p>Things I like to do.</p>
</section>
<section id="three">
<h2>Links</h2>
<p>My favourite links.</p>
</section>
<script>
location=location.hash||"#one"
</script>
加载中,请稍侯......
精彩评论