Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I cannot demo it in the fiddle (because iframe), but if you link to the first tab directly, eg: <code>http://www.yoururl.com/page#item-1</code>, the first tab's content will be visible on page load.</p> <p>You can test this by putting all your code inside a new blank html file (CSS and markup in their correct places) and saving it as "test.html". Then make another html file inside the same folder with this code:</p> <pre><code>&lt;html&gt; &lt;body&gt; &lt;a href="test.html#item-1"&gt;link&lt;/a&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Save and open the second file and click the link to go to your styled page. Note the first tab's content is visible, and tab switching still works as expected.</p> <p>Without JS to redirect or to change the window location, I don't believe you can get the same result through CSS alone.</p> <p><a href="http://css-tricks.com/on-target/" rel="nofollow">This article</a> explains why it works: <strong>The :target pseudo selector in CSS matches when the hash in the URL and the id of an element are the same.</strong></p> <hr> <p>edit to add another hacky, but pure CSS "solution": </p> <p>Make the first tab always visible with <code>#item-1 div {display: block}</code>, and set a background colour on all tabs:</p> <pre><code>.css-tabs ul.noint11_menu li &gt; div { display: none; position: absolute; width: 100%; left: 0; color: #ccc; text-align: left; padding: 0; margin-left: 32px; background: #fff; /* added this */ } </code></pre> <p>Now the other tabs will hide the first tab when they are selected. demo: <a href="http://jsfiddle.net/87YGW/3/" rel="nofollow">http://jsfiddle.net/87YGW/3/</a></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload