Using CSS "display: block;" and "display: none", It can provide "visible switch block".
Combined with more complex CSS, "Tab" UI can be implemented in HTML.
In my site, I use visible switch to provide inline translation like following.
in Japanese:
ここに日本語訳が入ります。(The Japanese translation goes here.)
This topic suggests the implementation of "visible switch" with jQuery however without "onClick" and "javascript:void(0);".
Yes it works...
To implement this scenario, there are several ways. Most typical one may be following.
Copy this html code to flatfile and view with browser. Yes it work...
You can switch visibility to click "Switch-1" or "Switch-2". This code uses "javascript:void(0);" or "#" in href. And it uses [onclick] attribute to launch javascript with "target" argument.
01<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
02<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05 <title>W3C valid visible switch with javascript:void(0); or #</title>
06 <script type="text/javascript">
07function dispswitch(target){
08 var obj = document.getElementById(target);
09 obj.style.display = (obj.style.display === "none") ? "block": "none";
10};
11 </script>
12 </head>
13 <body>
14 <div><a href="javascript:void(0);" onclick="dispswitch('target1');return false;">Switch-1:</a></div>
15 <div id="target1" style="display: none;">
16 This block is controled by "Switch-1".
17 </div>
18 <div><a href="#" onclick="dispswitch('target2');">Switch-2:</a></div>
19 <div id="target2" style="display: none;">
20 This block is controled by "Switch-2".
21 </div>
22 <p>Yes. It works...</p>
23 </body>
24</html>
Points
This typical code also valid as W3C XHTML 1.0 Strict.
However...
1 There is a tricky [href] attribute doing nothing.
"javascript:void(0);" or "#" do nothing. Because "onclick" attribute has main action.
2 There is a tricky [return false;] to interrupt event.
Set of [onclick] and [return false;] can cause environment-dependent problems.
3 This old approach mixes [view] and [control].
We would like to divide html and script also content and action. [onclick] attribute essentially contains script code.
4 [onclick] attribute conflicts with some .
It is the most troublesome issues for me. Some CMS removes [onclick] attribute automatically to avoid embedded scripts. So onclick action dosen't work.
Long story short, here is a code.
01<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
02<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05 <script src="https://www.google.com/jsapi?key=<!-- Change key to "your key"-->" type="text/javascript"></script>
06 <script type="text/javascript">google.load("jquery", "1.6.1");</script>
07 <title>W3C valid visible switch with jquery</title>
08 <style type="text/css">
09[id|=switcher]{
10 color : #1e90ff; /* dodgerblue */
11}
12
13[id|=switcher]:hover{
14 text-decoration: underline;
15 cursor:pointer;
16 color : #1e90ff; /* dodgerblue */
17}
18 </style>
19 <script type="text/javascript">
20$(function(){
21 $(".defaultNoDisplay").css("display","none");
22 $("[id^='switcher']").click(function(){
23 var target = "[id^='" + $(this).attr("class") + "']";
24 $(target).css("display",($(target).css("display") === "none") ? "block": "none");
25 });
26});
27 </script>
28 </head>
29 <body>
31 <span id="switcher-1" class="target1">Switch-1:</span>
32 </div>
33 <div id="target1" class="defaultNoDisplay">
34 This block is controled by "Switch-1".
35 </div>
37 <span id="switcher-2" class="target2">Switch-2:</span>
38 </div>
39 <div id="target2" class="defaultNoDisplay">
40 This block is controled by "Switch-2".
41 </div>
42 <p>This document was successfully checked as XHTML 1.0 Strict.</p>
43 </body>
44</html>
Points
0 Sample: This sample uses above code.
Switch-1:
This block is controled by "Switch-1".
Switch-2:
This block is controled by "Switch-2".
This document was successfully checked as XHTML 1.0 Strict.
1 Contents: Main contents contains only primary html tags.
31 <span id="switcher-1" class="target1">Switch-1:</span>
32 </div>
33 <div id="target1" class="defaultNoDisplay">
34 This block is controled by "Switch-1".
35 </div>
This content contains only [id] attribute and [class] attribute. It's just a HARD html.
2 Switch: jQuery and CSS
19 <script type="text/javascript">
20$(function(){
21 $(".defaultNoDisplay").css("display","none");
22 $("[id^='switcher']").click(function(){
23 var target = "[id^='" + $(this).attr("class") + "']";
24 $(target).css("display",($(target).css("display") === "none") ? "block": "none");
25 });
26});
27 </script>
This jQuery has 2 blocks.
The first block controls the post-load action. This code hides contents with [defaultNoDisplay] class as a default.
By doing that, The browser with javascript-on can hide additional contents as a default. In the other hand, The browser with javascript-off shows all contents. This approach cares both environments (javascript on/off) and provides an additional experience to javascript-on.
21 $(".defaultNoDisplay").css("display","none");
The second block controls visibility itself.
It handles CLICK EVENT whose ID starts with keyword [switcher]. In this sample, there are two [span] tags having [switcher] keyword.
To find switch target, this code use class attribute. To make a pair with switch and target, the target content ([div] in this case) has id that is same with switch's class attribute ([target1] in this case).
If switch is clicked, associated target content is displayed or is hidden by changing CSS (display: block/none ;).
22 $("[id^='switcher']").click(function(){
23 var target = "[id^='" + $(this).attr("class") + "']";
24 $(target).css("display",($(target).css("display") === "none") ? "block": "none");
25 });
3 Clickable: UI similar to the [link] with CSS.
This sample uses [span] content as a "switch". But [span] itself has no UI which is reminiscent of clickable.
So using CSS to display the content as lightblue (It looks like clickable link, isn't it?). Also if a mouse is over the content, text underline appears.
This is implemented with only CSS on the content whose [ID] attribute starts with a keyword "switcher".
08 <style type="text/css">
09[id|=switcher]{
10 color : #1e90ff; /* dodgerblue */
11}
12
13[id|=switcher]:hover{
14 text-decoration: underline;
15 cursor:pointer;
16 color : #1e90ff; /* dodgerblue */
17}
18 </style>
4 jQuery: Using hosted jQuery library.
To use jQuery, is useful.
This sample uses the Google Libraries API.
05 <script src="https://www.google.com/jsapi?key=<!-- Change key to "your key"-->" type="text/javascript"></script>
06 <script type="text/javascript">google.load("jquery", "1.6.1");</script>