sofish/ciaojs-tab.js

## ciaojs-tab.js
<html>

<style>
  .triggers .active {color:#f30;}
  .targets div {display:none;}
  .targets .active {display:block;}
</style>

<div class="triggers">
  <a href="#tab1" class="active">tab1</a>
  <a href="#tab2">tab2</a>
  <a href="#tab3">tab3</a>
</div>

<div class="targets">
  <div id="tab1" class="active">hello</div>
  <div id="tab2">ciao</div>
  <div id="tab3">halo</div>
</div>


<script>

  // 用闭包把组件包起来，避免冲突
  (function () {
    // 把 array-like 对象转换成 array
    var toArray = function (arrayLikeObject) {
      return [].slice.call(arrayLikeObject);
    };

    // this 在这里是 window
    // 支持传入一个两个参数，klas 不是必填
    this.Tab = function (triggerSelectors, klass) {

      // triggerSelector 是必填，如果没有 Tab 的触发点，则提醒用户
      if (typeof triggerSelectors !== 'string') throw 'triggerSelectors must be a string';

      // 找到所有触发点
      var triggers = document.querySelectorAll(triggerSelectors);

      // 设置默认 class
      klass = klass || 'active';
      var klassSelector = '.' + klass;

      // 没有触发点则不执行程序
      if (!triggers.length) return;

      // 给每个触发点添加点击事件
      triggers = toArray(triggers).forEach(function (trigger) {
        trigger.addEventListener('click', function () {

          // 获取触发点对应的内容，默认取 [data-target] 的值，如果有 href 则用其值
          var target = trigger.dataset.target;
          target = trigger.getAttribute('href') || target;
          target = document.querySelector(target);

          // 获取同一个父节点下当前高亮的触发点，并删除高亮 class
          var prevTrigger = trigger.parentNode.querySelector(klassSelector);
          if (prevTrigger) prevTrigger.classList.remove(klass);

          // 获取同一个父节点下当前高亮的 Tab 内容，并删除高亮 class
          var prevTarget = target.parentNode.querySelector(klassSelector);
          if (prevTarget) prevTarget.classList.remove(klass);

          // 添加高亮 class 到当前触发点和对应的 Tab 内容
          trigger.classList.add(klass);
          target.classList.add(klass);
        })
      });
    };
  })();

  // 实例化一个 Tab 组件
  new Tab('.triggers a');

  // 考虑一下如何自实例化？
</script>

</html>
	<html>

	<style>
	.triggers .active {color:#f30;}
	.targets div {display:none;}
	.targets .active {display:block;}
	</style>

	<div class="triggers">
	<a href="#tab1" class="active">tab1</a>
	<a href="#tab2">tab2</a>
	<a href="#tab3">tab3</a>
	</div>

	<div class="targets">
	<div id="tab1" class="active">hello</div>
	<div id="tab2">ciao</div>
	<div id="tab3">halo</div>
	</div>


	<script>

	// 用闭包把组件包起来，避免冲突
	(function () {
	// 把 array-like 对象转换成 array
	var toArray = function (arrayLikeObject) {
	return [].slice.call(arrayLikeObject);
	};

	// this 在这里是 window
	// 支持传入一个两个参数，klas 不是必填
	this.Tab = function (triggerSelectors, klass) {

	// triggerSelector 是必填，如果没有 Tab 的触发点，则提醒用户
	if (typeof triggerSelectors !== 'string') throw 'triggerSelectors must be a string';

	// 找到所有触发点
	var triggers = document.querySelectorAll(triggerSelectors);

	// 设置默认 class
	klass = klass \|\| 'active';
	var klassSelector = '.' + klass;

	// 没有触发点则不执行程序
	if (!triggers.length) return;

	// 给每个触发点添加点击事件
	triggers = toArray(triggers).forEach(function (trigger) {
	trigger.addEventListener('click', function () {

	// 获取触发点对应的内容，默认取 [data-target] 的值，如果有 href 则用其值
	var target = trigger.dataset.target;
	target = trigger.getAttribute('href') \|\| target;
	target = document.querySelector(target);

	// 获取同一个父节点下当前高亮的触发点，并删除高亮 class
	var prevTrigger = trigger.parentNode.querySelector(klassSelector);
	if (prevTrigger) prevTrigger.classList.remove(klass);

	// 获取同一个父节点下当前高亮的 Tab 内容，并删除高亮 class
	var prevTarget = target.parentNode.querySelector(klassSelector);
	if (prevTarget) prevTarget.classList.remove(klass);

	// 添加高亮 class 到当前触发点和对应的 Tab 内容
	trigger.classList.add(klass);
	target.classList.add(klass);
	})
	});
	};
	})();

	// 实例化一个 Tab 组件
	new Tab('.triggers a');

	// 考虑一下如何自实例化？
	</script>

	</html>