Jquery的tab選擇器

首先要引入jquery

      <div class="nav" id="tab-nav">
        <ul class="clearfix">
          <li><a href="javascript:;" class="current">關於我們</a></li>
          <li><a href="javascript:;">平臺優勢</a></li>
          <li><a href="javascript:;">新聞動態</a></li>
          <li><a href="javascript:;">聯繫我們</a></li>
        </ul>
      </div>


  <div class="wrap">
    
            <div class="content clearfix">
                      <div class="tab-content" id="tab-content">
                                <div class="current">
                                  <h3>關於我們</h3>
                                            <p class="article">
                                           　　測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試<br.>。
                                                測試測試測試測試測試測試測試測試測試測試
                                                    </p>
                                </div>


                                <div>
                                  <p class="pic-center"><img src="/static/login/images/thumb_pic.jpg" width="486" height="125" /></p>
                                </div>

                                <div>
                                  <h3>新聞動態</h3>
                                            <ul class="news-list">                       
                                            <li>測試測試測試測試</li>                       
                                            </ul>
                                </div>

                                <div>
                                  <h3>聯繫我們</h3>
                                  
                                            <p class="article">
                                                  測試測試服務政策：<br />
                                              1、讓測試測試報，結算方便.<br />
                                              2、24測試測試指導解決問題.<br />
                                              3、QQ:測試測試.
                                            </p>                   
                                           
                                </div>
                       </div>
              </div>
  </div>

<script type="text/javascript" src="js/M.Tabs.min.js"></script>
  <script type="text/javascript">
    //導航選擇
    new MTabs({
      nav:'tab-nav',             //上面的大div id
      content:'tab-content',     //下面的大div id
      currentClassName:'current',//觸發點擊的class
      eventType:'click'          //事件
    });
  </script>

</pre><pre code_snippet_id="507456" snippet_file_name="blog_20141104_6_8691772" name="code" class="javascript">

CSS:

</pre><pre code_snippet_id="507456" snippet_file_name="blog_20141104_7_5834071" name="code" class="javascript"><pre name="code" class="css">/*start*/
#tab-nav ul li {
	display:block;
 	background-color: #65CFCF; 
 	width:100px; 
 	height: 50px;
 	color:#fff; 
 	float: left; 
 	font-size: 10px;
 	margin-left: 1px;
 	border-radius:4px;
 	}
#tab-nav ul li a {
	display:block;
	 width:100%; 
	 height:100%;
	 color:#666666; 
	 font-size: 15px;
	 font-weight: bold;
	 text-align: center;
	 line-height: 45px;
	}
#tab-nav { display:block; }
#tab-nav li :hover{
	 text-decoration:none;
	 color: #fff;
	 background-color: green;
	}
.content .tab-content{
	 float: left;
 	 display: inline;
	 margin-left: 0px;
	 background-color: #e8e8e8;
	 width: 530px;
	 height: 135px;
	 overflow: hidden;
					}
.content .tab-content h3{
	 height: 40px;
	 line-height: 40px;
	 color: #b3a684;
	 font-size: 16px;
	 text-indent: 20px;
	}		
.current1{display: none;}
.current{display: block;}

引用的js

(function() {
	var MTabs = function(params) {
			if (!params) return false;
			if (params.currentClassName === 'undefined') params.currentClassName = 'current';
			if (params.eventType === 'undefined') params.eventType = 'mouseover';
			var _this = this;
			_this.navObj = document.getElementById(params.nav).getElementsByTagName('ul')[0].getElementsByTagName('li');
			_this.contentObj = document.getElementById(params.content).getElementsByTagName('div');
			_this.currentClassName = params.currentClassName;
			_this.eventType = params.eventType;
			_this.reset();
			_this.setClassName(_this.navObj[0].getElementsByTagName('a')[0], _this.currentClassName);
			_this.setStyle(_this.contentObj[0], 'block');
			_this.action()
		};
	MTabs.prototype = {
		action: function() {
			var _this = this;
			for (var i = 0; i < _this.navObj.length; i++) {
				_this.navObj[i].eq = i;
				if (_this.eventType == 'click') {
					_this.navObj[i].onclick = function() {
						_this.reset();
						_this.setClassName(_this.navObj[this.eq].getElementsByTagName('a')[0], _this.currentClassName);
						_this.setStyle(_this.contentObj[this.eq], 'block')
					}
				} else {
					_this.navObj[i].onmouseover = function() {
						_this.reset();
						_this.setClassName(_this.navObj[this.eq].getElementsByTagName('a')[0], _this.currentClassName);
						_this.setStyle(_this.contentObj[this.eq], 'block')
					}
				}
			}
		},
		reset: function() {
			var _this = this;
			for (var j = 0; j < _this.contentObj.length; j++) {
				_this.setClassName(_this.navObj[j].getElementsByTagName('a')[0], '');
				_this.setStyle(_this.contentObj[j], 'none')
			}
		},
		setStyle: function(obj, val) {
			return obj.style.display = val
		},
		setClassName: function(obj, val) {
			return obj.className = val
		}
	};
	window.MTabs = MTabs
}());

效果圖

點擊上面欄目下面的灰色方框即可進行內容切換