）を参考にし、)）のように
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>TEST</title>
<style type="text/css">
/* メニュー項目全体 */
#menu li { display: inline; }
/* それぞれのメニュー項目 */
.menu-item1 { background: blue; }
.menu-item1.active { background: red; }
.menu-item2 { background: blue; }
.menu-item2.active { background: red; }
.menu-item3 { background: blue; }
.menu-item3.active { background: red; }
.menu-item4 { background: blue; }
.menu-item4.active { background: red; }
</style>
<ul id="menu">
<li class="menu-item1"><a href="#content1">内容 1</a></li>
<li class="menu-item2"><a href="#content2">内容 2</a></li>
<li class="menu-item3"><a href="#content3">内容 3</a></li>
<li class="menu-item4"><a href="#content4">内容 4</a></li>
</ul>
<div id="content1"><h2>内容 1</h2></div>
<div id="content2"><h2>内容 2</h2></div>
<div id="content3"><h2>内容 3</h2></div>
<div id="content4"><h2>内容 4</h2></div>
<script type="text/javascript">
/*@cc_on@*/
if (/*@if (@_jscript) @_jscript_version > 5.5 && @end@*/
document.implementation &&
document.implementation.hasFeature ('HTML', '1.0'))
(function () {
function TabbedView (evt) {
arguments.callee.prototype.handleEvent (evt);
return arguments.callee;
}
TabbedView.initializeById = function (id) {
var node = document.getElementById (id);
if (node) {
node./*@if (@_jscript) attachEvent ('on' + @else@*/ addEventListener (/*@end@*/ 'click', this, false);
node = node.getElementsByTagName ('a')[0];
if (node) {
/*@if (@_jscript)
var evt = document.createEventObject ();
node.fireEvent ('onclick', evt);
@else@*/
var evt = document.createEvent ('MouseEvents');
evt.initEvent ('click', true, true);
node.dispatchEvent (evt);
/*@end@*/
}
}
}
TabbedView.prototype = {
uriExpression : /^(([^:/?#]+):)?(\/\/([^/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?/,
handleEvent : function (evt) {
/*@if (@_jscript)
var t = evt.srcElement;
evt.returnValue = false;
@else@*/
var t = evt.target;
evt.preventDefault ();
/*@end@*/
if (t.nodeName == 'A' && t.parentNode.nodeName == 'LI') {
var div = document.getElementById (this.uriExpression.exec (t.href)[9]);
if (div) div.style.display = 'block';
this.setClassName (t.parentNode, true);
this.deactivate (t.parentNode, 'previousSibling');
this.deactivate (t.parentNode, 'nextSibling');
}
},
deactivate : function (node, siblingName) {
var div, m, n;
for (m = node; m = m[siblingName]; this.setClassName (m, false)) {
for (n = m.firstChild; n; n = n.nextSibling) {
if (n.nodeName == 'A') {
div = document.getElementById (this.uriExpression.exec (n.href)[9]);
if (div) div.style.display = 'none';
break;
}
}
}
},
setClassName : function (node, active) {
if (node.nodeType == 1 /*Node.ELEMENT_NODE*/) {
var className = ' ' + node.className + ' ';
if (active) {
if (className.indexOf ('active') == -1) {
node.className += ' active';
}
} else {
node.className = className.replace (/\s*active\s*/i, '');
}
}
}
};
// タブ化したいメニューの id を指定。複数指定可。
TabbedView.initializeById ('menu');
} )();
</script>if (className.indexOf ('active') == -1) {
↓
if (className.indexOf (' active ') == -1) {.menu-item1.active .menu-item2.activeの後ろの部分しか見ないから、上書きされてしまいますね。誰だこんな方法書いたのは。俺だよ。ごめんなさい。
<li class="menu-item1"><a class="active">内容 1</a></li>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> <style type="text/css"> /* メニュー項目全体 */ #menu { list-style: none; } #menu li { float: left; /* based on CSS 2.1 */ } #menu li a { border: 1px solid #999; display: block; width: 80px; height: 20px; } #menu li a.active { width: 100px; height: 30px; } div { clear: left; } /* それぞれのメニュー項目 */ .menu-item1 a { background: #a00; } .menu-item1 a.active { background: #f00; } .menu-item2 a { background: #aa0; } .menu-item2 a.active { background: #ff0; } .menu-item3 a { background: #a0a; } .menu-item3 a.active { background: #f0f; } .menu-item4 a { background: #aaa; } .menu-item4 a.active { background: #eee; } </style> <script type="text/javascript"> if (/*@cc_on @if (@_jscript) @_jscript_version > 5.5 && @end@*/ document.implementation && document.implementation.hasFeature ('HTML', '1.0')) /*@if (@_jscript) attachEvent ('on' + @else@*/ addEventListener (/*@end@*/ 'load', function () { /************************************************************************/ function TabbedView (evt) { arguments.callee.prototype.handleEvent (evt); return arguments.callee; } TabbedView.initializeById = function (id) { var node = document.getElementById (id); if (node) { node./*@if (@_jscript) attachEvent ('on' + @else@*/ addEventListener (/*@end@*/ 'click', this, false); node = node.getElementsByTagName ('a')[0]; if (node) { /*@if (@_jscript) var evt = document.createEventObject (); node.fireEvent ('onclick', evt); @else@*/ var evt = document.createEvent ('MouseEvents'); evt.initEvent ('click', true, true); node.dispatchEvent (evt); /*@end@*/ } } }; TabbedView.prototype = { uriExpression : /^(([^:/?#]+):)?(\/\/([^/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?/, handleEvent : function (evt) { /*@if (@_jscript) var t = evt.srcElement; evt.returnValue = false; @else@*/ var t = evt.target; evt.preventDefault (); /*@end@*/ if (t.nodeName == 'A' && t.parentNode.nodeName == 'LI') { var div = document.getElementById (this.uriExpression.exec (t.href)[9]); if (div) div.style.display = 'block'; this.setClassName (t, true); this.deactivate (t.parentNode, 'previousSibling'); this.deactivate (t.parentNode, 'nextSibling'); } }, deactivate : function (node, siblingName) { var div, m, n; for (m = node; m = m[siblingName]; ) { for (n = m.firstChild; n; n = n.nextSibling) { if (n.nodeName == 'A') { this.setClassName (n, false); div = document.getElementById (this.uriExpression.exec (n.href)[9]); if (div) div.style.display = 'none'; break; } } } }, setClassName : function (node, active) { if (node.nodeType == 1 /*Node.ELEMENT_NODE*/) { var className = ' ' + node.className + ' '; if (active) { if (className.indexOf (' active ') == -1) { node.className += ' active'; } } else { node.className = className.replace (/\s*active\s*/i, ''); } } } }; TabbedView.initializeById ('menu'); /************************************************************************/ }, false); </script> <ul id="menu"> <li class="menu-item1"><a href="#content1">内容 1</a></li> <li class="menu-item2"><a href="#content2">内容 2</a></li> <li class="menu-item3"><a href="#content3">内容 3</a></li> <li class="menu-item4"><a href="#content4">内容 4</a></li> </ul> <div id="content1"><h2>内容 1</h2></div> <div id="content2"><h2>内容 2</h2></div> <div id="content3"><h2>内容 3</h2></div> <div id="content4"><h2>内容 4</h2></div>
TabbedView.initializeById = function (id) {
var node = document.getElementById (id);
if (node) {
node./*@if (@_jscript) attachEvent ('on' + @else@*/ addEventListener (/*@end@*/ 'click', this, false);
var nodes = node.getElementsByTagName ('a'), i = 0, I = nodes.length;
if (location.hash) {
for (; i < I; i++) if (nodes[i].href == location) break;
}
if (node = nodes[i]) {
/*@if (@_jscript)
var evt = document.createEventObject ();
node.fireEvent ('onclick', evt);
@else@*/
var evt = document.createEvent ('MouseEvents');
evt.initEvent ('click', true, true);
node.dispatchEvent (evt);
/*@end@*/
}
}
};
TabbedView.prototype = {
......
handleEvent : function (evt) {
/*@if (@_jscript)
var t = evt.srcElement;
// evt.returnValue = false; // この行を削除
@else@*/
var t = evt.target;
// evt.preventDefault (); // この行を削除
/*@end@*/
if (t.nodeName == 'A' && t.parentNode.nodeName == 'LI') {
var div = document.getElementById (this.uriExpression.exec (t.href)[9]);
if (div) div.style.display = 'block';
this.setClassName (t, true);
this.deactivate (t.parentNode, 'previousSibling');
this.deactivate (t.parentNode, 'nextSibling');
}
},
......
};