Как вариант...
<!DOCTYPE html>
<html>
<head>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
var _click = function () {
var b = 1;
return function (c) {
var a = document.getElementById("item" + b);
c == b && (a.style.display = "none" == a.style.display ? "" : "none");
c != b && (a.style.display = "none", a = document.getElementById("item" + c), a.style.display = "", b = c)
}
}();
document.onclick=function (event) {
var target = event.target || event.srcElement;
if (target.className=='item') {
return;
};
if (target.className!='target') {
var o=document.querySelectorAll('.target');
for (var i=0; i<o.length; i++) {
o[i].style.display = "none";
};
};
}
</script>
</head>
<body>
<div id="menu">
<ul>
<li><a onclick="_click(1); return false;" class='item' href="#">1</a></li>
<li><a onclick="_click(2); return false;" class='item' href="#">2</a></li>
<li><a onclick="_click(3); return false;" class='item' href="#">3</a></li>
</ul>
</div>
<div style=" display:none" id="item1" class='target'>div1</div>
<div style=" display:none" id="item2" class='target'>div2</div>
<div style=" display:none" id="item3" class='target'>div3</div>
</body>
</html>
|