javascript通过获取html标签属性class实现多选项卡的方法
本文实例讲述了javascript通过获取html标签属性class实现多选项卡的方法。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>原生javascript通过获取html标签属性class实现多选项卡</title>
<style type="text/css">
.tab {
clear: both;
margin: 20px auto;
padding: 10px;
width: 680px;
overflow: hidden;
}
.tab .tab-menu {
margin: 0;
padding: 0;
list-style: none;
}
.tab .tab-menu li {
display: inline;
margin: 0 2px 0 0;
}
.tab .tab-menu li a {
padding: 0 1em;
text-decoration: none;
color: #a80;
background: #fe5;
}
.tab .tab-menu li a:hover {
background: #fc0;
color: #540;
}
.tab .tab-menu .active {
}
.tab .tab-menu .active a {
padding-bottom: 2px;
font-weight: bold;
color: black;
background: #fc0;
}
.tab .tab-panel {
padding: 1em;
border: 2px solid #fc0;
background: #fff;
}
.tab .tab-panel h2 {
font-size: 1.5em;
color: #fc0;
}
.tab .tab-none {
display: none;
}
</style>
<script type="text/javascript">
function Tab(style, scope){
this.oItem = this.getByClass(style, scope);
this.init();
}
Tab.prototype = {
init: function(){
var that = this, menu, m;
for(var i = 0, len = this.oItem.length; i < len; i++){
menu = this.oItem[i].getElementsByTagName('li');
for(var j = 0, mLen = menu.length; j < mLen; j++){
m = menu[j];
m.index = j;
m.onmouseover = function(){that.focus(this);}
}
}
},
focus: function(o){
var par = o.parentNode.parentNode, panel = par.getElementsByTagName('div'),
btn = par.getElementsByTagName('li'), len = btn.length;
for(var i = 0; i < len; i++){
btn[i].className = '';
panel[i].className = this.changeClass(panel[i].className, 'tab-none', true);
}
o.className = 'active';
panel[o.index].className = this.changeClass(panel[o.index].className, 'tab-none', false);
},
changeClass: function(cl, cl2, add){
var flag;
if(cl.match(cl2) != null) flag = true;
if(add ^ flag) return flag ? cl.replace(cl2, '') : cl += ' ' + cl2;
return cl;
},
getByClass: function(cla, obj){
var obj = obj || document, arr = [];
if(document.getElementsByClassName){
return document.getElementsByClassName(cla);
} else {
var all = obj.getElementsByTagName('*');
for(var i = 0, len = all.length; i < len; i++){
if(all[i].className.match(cla) != null) arr.push(all[i]);
}
return arr;
}
}
}
window.onload = function(){
new Tab('tab-menu', null);
}
</script>
</head>
<body>
<div class="tab">
<ul class="tab-menu">
<li class="active"><a href="">111</a></li>
<li><a href="">122</a></li>
<li><a href="">133</a></li>
</ul>
<div class="tab-panel">
111
</div>
<div class="tab-panel tab-none">
122
</div>
<div class="tab-panel tab-none">
133
</div>
</div>
<div class="tab">
<ul class="tab-menu">
<li class="active"><a href="">211</a></li>
<li><a href="">222</a></li>
<li><a href="">233</a></li>
</ul>
<div class="tab-panel">
211
</div>
<div class="tab-panel tab-none">
222
</div>
<div class="tab-panel tab-none">
233
</div>
</div>
<div class="tab">
<ul class="tab-menu">
<li class="active"><a href="">311</a></li>
<li><a href="">322</a></li>
<li><a href="">333</a></li>
</ul>
<div class="tab-panel">
311
</div>
<div class="tab-panel tab-none">
322
</div>
<div class="tab-panel tab-none">
333
</div>
</div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
相关推荐
-
JS对HTML标签select的获取、添加、删除操作
复制代码 代码如下: <SELECT NAME="aaa" SIZE="" style="width:200px" > <OPTION VALUE="">(空)</OPTION> <OPTION VALUE="1">1</OPTION> </SELECT> 复制代码 代码如下: //获得html控件 var select = docum
-
JavaScript 替换Html标签实现代码
复制代码 代码如下: str = str.<br /> replace( /&(?!#?\w+;)/g , '&').<br /> replace( /undefinedundefined([^undefinedundefined]*)"/g , '"$1"' ).<br /> replace( /</g , '<' ).<br /> replace( />/g , '>' ).<b
-
js过滤HTML标签完整实例
本文实例讲述了js过滤HTML标签的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&
-
js过滤HTML标签以及空格的思路及代码
复制代码 代码如下: function setContent(str) {str = str.replace(/<\/?[^>]*>/g,''); //去除HTML tagstr.value = str.replace(/[ | ]*\n/g,'\n'); //去除行尾空白//str = str.replace(/\n[\s| | ]*\r/g,'\n'); //去除多余空行return str;} 测试的时候发现这段代码不能过滤掉网页中空格字符(即: ).于是自己又改造了一下: 复制代
-
JS检测页面中哪个HTML标签触发点击事件的方法
本文实例讲述了JS检测页面中哪个HTML标签触发点击事件的方法.分享给大家供大家参考,具体如下: 在html标签中,为了页面显示的美观,会在标签中相互嵌套,在做"效果"的时候就难免不了的添加各种事件,例如: <a href=""><span onclick="">dddd</span></a> 当用户点击的时候,想确定是链接产生的事件还是span标签onclick标签产生的事件,这个有时候是很有必要
-
用JS实现HTML标签替换效果
有个静态页面 <span id=ab>abcde</span><span id=ab>abcde</span><span id=ab>abcde</span><span id=ab>abcde</span> 能否通过js实现,IE浏览时的代码被替换为 <img src="img/1.gif"/><img src="img/1.gif"/><i
-
Java/Js下使用正则表达式匹配嵌套Html标签
通用 HTML 标签区配正则 最近看网站日志,发现有人在博客上转了我不知道几年前写的一个匹配 HTML 标签的正则,刚好最近也在做一些相关的事情,顿时来了兴趣.就拿回来改改,成了下面这样,可能会有一些 case 遗漏,欢迎修改,已知在内嵌 <script> 复杂内容的处理能力较弱,不过对纯 HTML 来说已经够用,拿来做一些分析工具还是不错滴. 复制代码 代码如下: <script type="text/javascript"> var str = "
-
js自动闭合html标签(自动补全html标记)
复制代码 代码如下: <script type="text/javascript"> // Close HTML Tags -------------------------------------------- function closeHTML(str){ var arrTags=["span","font","b","u","i","h1",&qu
-
js简单实现HTML标签Select联动带跳转
复制代码 代码如下: <script src="Scripts/jquery-1.9.1.min.js" type="text/javascript"></script> 复制代码 代码如下: <FORM name="form5" id="form5" action="" method="post" target="_blank" ons
-
javascript实现去除HTML标签的方法
本文实例讲述了javascript实现去除HTML标签的方法.分享给大家供大家参考,具体如下: <script type="text/javascript"> String.prototype.stripHTML = function() { var reTag = /<(?:.|\s)*?>/g; return this.replace(reTag,""); } var sTest = "<b>this would b
-
JavaScript检测字符串中是否含有html标签实现方法
功能代码 复制代码 代码如下: /** * 字符串是否含有html标签的检测 * @param htmlStr */ function checkHtml(htmlStr) { var reg = /<[^>]+>/g; return reg.test(htmlStr); } demo script: 复制代码 代码如下: /** * 字符串是否含有html标签的检测 * @param htmlStr */ function checkHtml(htmlSt