菜鸟级人物求大神，CSS样式相同，调用同一个JS怎么操作？？
function $(id) {
if (typeof jQuery == 'undefined' || (typeof id == 'string' && document.getElementById(id))) {
return document.getElementById(id);
} else if (typeof id == 'object' || !/^\w*$/.exec(id) ||
/^(body|div|span|a|input|textarea|button|img|ul|li|ol|table|tr|th|td)$/.exec(id)){
return jQuery(id);
}
return null;
}
var titleName = $("tab-title").getElementsByTagName("li");
var tabContent = $("tab-content").getElementsByTagName("div");
if(titleName.length != tabContent.length){
return;
}
for(var i = 0;i<titleName.length;i++){
titleName[i].id = i;
titleName[i].onmouseover = function(){
for(var j = 0;j<titleName.length;j++){
titleName[j].className = "";
tabContent[j].style.display = "none"
}
this.className = "select";
tabContent[this.id].style.display = "block";
}
}
--------------------------------------------------------------------------------------------------------
《CSS》第一个
<div class="tab" id="tab">
<div class="tab-title" id="tab-title">
<ul>
<li class="select" ><a href="" </a></li>
<li><a href="" </a></li>
.......
</ul>
</div>
<div class="tab-content" id="tab-content"></div>
<div class="tabct" style="display:block;"></div>
<ul><li></li></ul>
</div>
第二个同上
以上只会有一个生效，多个CSS调用最上面同一个JS？或其它办法？？
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<div class="tab">
<div class="tab-title">
<ul>
<li class="select" ><a href="#">aaaaaaaaaaaaaaaaaaaaaa</a></li>
<li><a href="#">bbbbbbbbbbbbbbbbbbb</a></li>
</ul>
</div>
<div class="tab-content">
<div class="tabct" style="display:block;">sadfsadfsdfsda</div>
<div class="tabct" style="display:none;">bvccgdfasdfsdafasd</div>
</div>
</div>
<hr>
<div class="tab">
<div class="tab-title">
<ul>
<li class="select" ><a href="#">aaaaaaaaaaaaaaaaaaaaaa</a></li>
<li><a href="#">bbbbbbbbbbbbbbbbbbb</a></li>
</ul>
</div>
<div class="tab-content">
<div class="tabct" style="display:block;">sadfsadfsdfsda</div>
<div class="tabct" style="display:none;">bvccgdfasdfsdafasd</div>
</div>
</div>
<script type="text/javascript">
function getElementsByClass(parent, nodeType, className) {
parent = parent || document;
var allNodes = parent.getElementsByTagName(nodeType);
var nodeList = [];
for (var i = 0; i < allNodes.length; i++) {
if (allNodes[i].className === className) {
nodeList.push(allNodes[i]);
}
}
return nodeList;
}
var tabs = getElementsByClass(document, 'div', 'tab');
for (var k = 0; k < tabs.length; k++) {
var titleName = getElementsByClass(tabs[k], 'div', "tab-title")[0].getElementsByTagName("li");
var tabContent = getElementsByClass(tabs[k], 'div', "tab-content")[0].getElementsByTagName("div");
if(titleName.length == tabContent.length){
for(var i = 0;i<titleName.length;i++){
titleName[i].id = i;
titleName[i].onmouseover = (function(titleName, tabContent){
return function() {
for(var j = 0;j<titleName.length;j++){
titleName[j].className = "";
tabContent[j].style.display = "none"
}
this.className = "select";
tabContent[this.id].style.display = "block";
};
})(titleName, tabContent);
}
}
}
</script>
</body>
</html>本回答被提问者和网友采纳
