Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
Alternative to CSS only onclick functioni.html
When you click on any of the tabs it will kick you straight to the start of the tab menu. I cannot use javascript or jquery so cannot use onclick=”false”. Is there a CSS way to prevent this from happening.
The problem you’re having stems from your use of the CSS
:targetselector (which requires the#item-1in the URL to function). Settinghref="#item-1"allows the:targetselector to function at the cost of putting#item-1in the URL, which is what causes the page to jump. It’s a vicious catch-22 and there’s no way around it usinghrefattributes.The only way I know how to duplicate tab functionality using only CSS is to use a variation of “the checkbox hack” (substituting radio buttons for checkboxes).
In essence, use a
<label>Tab</label><input type="radio" />element set where you are currently using<a href="">Tab</a>and then set CSS style rules to control visibility of the tab-content div based on thecheckedproperty of the radio button.Specific to your code:
will work when your markup is:
Here’s a fiddle demonstrating it: http://jsfiddle.net/ezhDQ/
Please note in the fiddle, I set
<div class="footer">to be a footer for all tabs, not each tab. This is because your markup uses theidattribute for the Facebook, Twitter, Skype, web, and Favorite images. The purpose of theidattribute is to identify one specific element on the page (meaning theidattribute of each element having one must be unique).If you want each tab to have its own footer, change your markup to use the
nameattribute instead.Also, below is your page with completely valid XHTML Transitional markup (which will help in the long run for cross-browser consistency):
UPDATE
Here’s one way to have a working horizontal tab strip (also in valid XHTML):