菜鸟级人物求大神，CSS样式相同，调用同一个JS怎么操作？？

function$(id){if(typeofjQuery=='undefined'||(typeofid=='string'&&document.getElementB... 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？或其它办法？？展开

 我来答

1个回答

#热议# 普通体检能查出癌症吗？

惜需满n
2015-05-16 · TA获得超过476个赞

知道小有建树答主

回答量：399

采纳率：0%

帮助的人：351万

我也去答题访问个人页

关注

展开全部

因为你用的是id选择，id应该是唯一的，所以用getElementById也只能得到一个元素，如果有两个相同id的元素，只会返回第一个。可以实现一个getElementsByClass方法，来通过class选择多个元素。
<!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>


本回答被提问者和网友采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

菜鸟级人物求大神，CSS样式相同，调用同一个JS怎么操作？？

其他类似问题

为你推荐：