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程序设计有所帮助。

时间: 2015-07-25

JS检测页面中哪个HTML标签触发点击事件的方法

本文实例讲述了JS检测页面中哪个HTML标签触发点击事件的方法.分享给大家供大家参考,具体如下: 在html标签中,为了页面显示的美观,会在标签中相互嵌套,在做"效果"的时候就难免不了的添加各种事件,例如: <a href=""><span onclick="">dddd</span></a> 当用户点击的时候,想确定是链接产生的事件还是span标签onclick标签产生的事件,这个有时候是很有必要

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;} 测试的时候发现这段代码不能过滤掉网页中空格字符(即: ).于是自己又改造了一下: 复制代

Java/Js下使用正则表达式匹配嵌套Html标签

通用 HTML 标签区配正则 最近看网站日志,发现有人在博客上转了我不知道几年前写的一个匹配 HTML 标签的正则,刚好最近也在做一些相关的事情,顿时来了兴趣.就拿回来改改,成了下面这样,可能会有一些 case 遗漏,欢迎修改,已知在内嵌 <script> 复杂内容的处理能力较弱,不过对纯 HTML 来说已经够用,拿来做一些分析工具还是不错滴. 复制代码 代码如下: <script type="text/javascript"> var str = "

JavaScript检测字符串中是否含有html标签实现方法

功能代码 复制代码 代码如下: /**  * 字符串是否含有html标签的检测  * @param htmlStr  */ function checkHtml(htmlStr) {     var  reg = /<[^>]+>/g;     return reg.test(htmlStr); } demo script: 复制代码 代码如下: /**  * 字符串是否含有html标签的检测  * @param htmlStr  */ function checkHtml(htmlSt

用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

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

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

JS对HTML标签select的获取、添加、删除操作

复制代码 代码如下: <SELECT NAME="aaa" SIZE="" style="width:200px" > <OPTION VALUE="">(空)</OPTION> <OPTION VALUE="1">1</OPTION> </SELECT> 复制代码 代码如下: //获得html控件 var select = docum

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&

JavaScript 替换Html标签实现代码

复制代码 代码如下: str = str.<br /> replace( /&(?!#?\w+;)/g , '&').<br /> replace( /undefinedundefined([^undefinedundefined]*)"/g , '"$1"' ).<br /> replace( /</g , '<' ).<br /> replace( />/g , '>' ).<b

javascript操纵OGNL标签示例代码

吧ONGL标签放到html标签中,来操作html的标签就可以了 例子代码: html 复制代码 代码如下: <div id="categoryid" style="display:none;"><s:property value="id"/></div> javascript 复制代码 代码如下: <script type="text/javascript"> var categ

JavaScript正则替换HTML标签功能示例

本文实例讲述了JavaScript正则替换HTML标签功能.分享给大家供大家参考,具体如下: 1.说明 获取HTML字符串(包含标签),通过正则表达式替换HTML标签,输出替换后的字符串 2.实现JavaScript代码 function deleteTag() { var regx = /<[^>]*>|<\/[^>]*>/gm; var tagStr = $("#ul_li").html(); alert("替换之前的字符串:"

Java中替换HTML标签的方法代码

1.替换HTML标签 复制代码 代码如下: replaceAll("\\&[a-zA-Z]{0,9};", "").replaceAll("<[^>]*>", "\n\t") 源码如下: 复制代码 代码如下: /** * 字符串替换 */package com.you.model; /** * HTML标签替换 * @author YHD * @version */public class StrRe

教你用javascript实现随机标签云效果_附代码

标签云是一套相关的标签以及与此相应的权重.典型的标签云有30至150个标签.权重影响使用的字体大小或其他视觉效果.同时,直方图或饼图表是最常用的代表约12种不同的权数.因此,标签云彩能代表更多的权,尽管不那么准确.此外,标签云通常是可以交互的:标签是典型的超链接,让用户可以仔细了解他们的内容.   大概可以理解为一堆相关或者不相关的标签混到一块,根据不同的重要程度,或者其他维度的不同来为每个标签设置不同的样式已凸显他们的不同,这样的一堆标签在一起就是我们通常说的标签云了.   下面我们大概说一下

php 批量替换html标签的实例代码

1.把html元素全部去掉,或者保留某几个html标签 复制代码 代码如下: <?php$text = '<p>Test paragraph.</p><!-- Comment --> <a href="#fragment">Other text</a>';echo strip_tags($text);echo "/n"; // Allow <p> and <a>echo str

Python使用正则表达式过滤或替换HTML标签的方法详解

本文实例讲述了Python使用正则表达式过滤或替换HTML标签的方法.分享给大家供大家参考,具体如下: python正则表达式关键内容: python正则表达式转义符: . 匹配除换行符以外的任意字符 \w 匹配字母或数字或下划线或汉字 \s 匹配任意的空白符 \d 匹配数字 \b 匹配单词的开始或结束 ^ 匹配字符串的开始 $ 匹配字符串的结束 \W 匹配任意不是字母,数字,下划线,汉字的字符 \S 匹配任意不是空白符的字符 \D 匹配任意非数字的字符 \B 匹配不是单词开头或结束的位置 [^

JavaScript生成.xls文件的代码

贴代码,一切尽在注释中 <html> <head> <meta charset="utf-8"> </head> <body> <input type="button" value="下载设备模板" onclick="foo;" /> <script type="text/javascript" language="ja

JavaScript+CSS相册特效实例代码

嗯 就是这样一个例子,视频学到的一个特效,实际用处并不大,但是可以帮助理解JS语言和熟悉CSS3样式. 设计: 观察一张图片的变化,发现: 1.图片缩放(随机,并且不是同时运动) 1.从大到小 2.从小到大,透明度从1到0(在第一步运动完成后立马开始) 2.图片旋转(随机,并且不是同时运动的.需要在全部运动走完以后开始) 3. 因为每张图片是随机开始变换的,所以起始时间是不同的,这里可设置一个延迟器setTimeout,时间用random随机生成即可. 4. 中间需要用到自执行函数,因为setT

javascript处理a标签超链接默认事件的方法

本文实例讲述了javascript处理a标签超链接默认事件的方法.分享给大家供大家参考.具体分析如下: 有时需要在a标签上添加click事件,并且跳转前处理一些事务,故需要做一些处理:通常前端会给出一个<a href="#">link</a>来代表这个行为,有些还会这样写<a href="###">link</a>或者<a href="javascript:void(0);">link&