argshook/jsbin.mejim.html

## jsbin.mejim.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

  <div class="tabbed">
    <ul class="tabs">
      <li data-tab="1">tab #1</li>
      <li data-tab="2">tab #2</li>
      <li data-tab="3">tab #3</li>
      <li data-tab="4">tab #4</li>
    </ul>
    <div class="content">
      <div class="item" data-open="true" data-item="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quo saepe qui sapiente ullam quis est repellendus ad repudiandae animi.</div>
      <div class="item" data-item="2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione debitis et rem esse voluptatum quo aperiam tenetur deleniti maiores optio consequatur laboriosam veniam maxime. Aliquam!</div>
      <div class="item" data-item="3">Lorem ipsum dolor sit amet.</div>
    </div>
  </div>

  <hr>

   <div class="tabbed">
    <ul class="tabs">
      <li data-tab="1">first</li>
      <li data-tab="2">second</li>
      <li data-tab="3">third</li>
      <li data-tab="4">forth</li>
      <li data-tab="5">no content</li>
    </ul>
    <div class="content">
      <div class="item" data-open="true" data-item="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quo saepe qui sapiente ullam quis est repellendus ad repudiandae animi.</div>
      <div class="item" data-item="2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione debitis et rem esse voluptatum quo aperiam tenetur deleniti maiores optio consequatur laboriosam veniam maxime. Aliquam!</div>
      <div class="item" data-item="3">Lorem ipsum dolor sit amet.</div>
      <div class="item" data-item="4">Lorem ipsum dolor sit ameaskldjalkst.</div>
    </div>
  </div>

</body>
</html>

## jsbin.mejim.js
var options = {
  selector: '.tabbed'
};

(function(options) {
  var $containers = $(options.selector);
  $containers.each(function() {
    var
        $container = $(this),
        $tabs = $container.find('.tabs').attr('data-instance', new Date().getTime()), // adding data-instance for events to work correctly when multiple instances of this tabbed thingy are issued.
        $contentItems = $container.find('.content');

    $tabs.on('click', function(event) {
      // simple event delegation
      if(event.target.nodeName === 'LI') {
        var tabId = $(event.target).attr('data-tab');

        // close all previously opened tabs
        $tabs
        .find('[data-open=true]')
        .attr('data-open', 'false');
        // open clicked tab
        $tabs
        .find('[data-tab='+tabId+']')
        .attr('data-open', 'true');
        // hide previously open tab content
        $contentItems
        .find('.item')
        .attr('data-open', 'false');
        // open current tab content
        $contentItems
        .find('[data-item=' + tabId + ']')
        .attr('data-open', 'true');
      }
    });
  });

})(options);

## jsbin.mejim.less
* {box-sizing: border-box;}

.tabbed {
  .tabs {
    list-style: none;
    margin: 0;
    padding: 0;
    li {
      display: inline-block;
      cursor: pointer;
      &:first-child { border-left: none; }
      &[data-open="true"],
      &:hover {
        //
      }
      &:active {
        //
      }
    }
  }
  .content {
    padding: 0.2em;
    .item,
    .item[data-open="false"] {
      display: none;
    }
    .item[data-open="true"] {
      display: block !important;
    }
  }
}

## jsbin.mejim.min.js
var options = {
  selector: '.tabbed'
};

(function(e){var t=$(e.selector);t.each(function(){var e=$(this),t=e.find(".tabs").attr("data-instance",(new Date).getTime()),n=e.find(".content");t.on("click",function(e){if(e.target.nodeName==="LI"){var r=$(e.target).attr("data-tab");t.find("[data-open=true]").attr("data-open","false");t.find("[data-tab="+r+"]").attr("data-open","true");n.find(".item").attr("data-open","false");n.find("[data-item="+r+"]").attr("data-open","true")}})})})(options)
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>

	<div class="tabbed">
	<ul class="tabs">
	<li data-tab="1">tab #1</li>
	<li data-tab="2">tab #2</li>
	<li data-tab="3">tab #3</li>
	<li data-tab="4">tab #4</li>
	</ul>
	<div class="content">
	<div class="item" data-open="true" data-item="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quo saepe qui sapiente ullam quis est repellendus ad repudiandae animi.</div>
	<div class="item" data-item="2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione debitis et rem esse voluptatum quo aperiam tenetur deleniti maiores optio consequatur laboriosam veniam maxime. Aliquam!</div>
	<div class="item" data-item="3">Lorem ipsum dolor sit amet.</div>
	</div>
	</div>

	<hr>

	<div class="tabbed">
	<ul class="tabs">
	<li data-tab="1">first</li>
	<li data-tab="2">second</li>
	<li data-tab="3">third</li>
	<li data-tab="4">forth</li>
	<li data-tab="5">no content</li>
	</ul>
	<div class="content">
	<div class="item" data-open="true" data-item="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quo saepe qui sapiente ullam quis est repellendus ad repudiandae animi.</div>
	<div class="item" data-item="2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione debitis et rem esse voluptatum quo aperiam tenetur deleniti maiores optio consequatur laboriosam veniam maxime. Aliquam!</div>
	<div class="item" data-item="3">Lorem ipsum dolor sit amet.</div>
	<div class="item" data-item="4">Lorem ipsum dolor sit ameaskldjalkst.</div>
	</div>
	</div>

	</body>
	</html>
	var options = {
	selector: '.tabbed'
	};

	(function(options) {
	var $containers = $(options.selector);
	$containers.each(function() {
	var
	$container = $(this),
	$tabs = $container.find('.tabs').attr('data-instance', new Date().getTime()), // adding data-instance for events to work correctly when multiple instances of this tabbed thingy are issued.
	$contentItems = $container.find('.content');

	$tabs.on('click', function(event) {
	// simple event delegation
	if(event.target.nodeName === 'LI') {
	var tabId = $(event.target).attr('data-tab');

	// close all previously opened tabs
	$tabs
	.find('[data-open=true]')
	.attr('data-open', 'false');
	// open clicked tab
	$tabs
	.find('[data-tab='+tabId+']')
	.attr('data-open', 'true');
	// hide previously open tab content
	$contentItems
	.find('.item')
	.attr('data-open', 'false');
	// open current tab content
	$contentItems
	.find('[data-item=' + tabId + ']')
	.attr('data-open', 'true');
	}
	});
	});

	})(options);
	* {box-sizing: border-box;}

	.tabbed {
	.tabs {
	list-style: none;
	margin: 0;
	padding: 0;
	li {
	display: inline-block;
	cursor: pointer;
	&:first-child { border-left: none; }
	&[data-open="true"],
	&:hover {
	//
	}
	&:active {
	//
	}
	}
	}
	.content {
	padding: 0.2em;
	.item,
	.item[data-open="false"] {
	display: none;
	}
	.item[data-open="true"] {
	display: block !important;
	}
	}
	}
	var options = {
	selector: '.tabbed'
	};

	(function(e){var t=$(e.selector);t.each(function(){var e=$(this),t=e.find(".tabs").attr("data-instance",(new Date).getTime()),n=e.find(".content");t.on("click",function(e){if(e.target.nodeName==="LI"){var r=$(e.target).attr("data-tab");t.find("[data-open=true]").attr("data-open","false");t.find("[data-tab="+r+"]").attr("data-open","true");n.find(".item").attr("data-open","false");n.find("[data-item="+r+"]").attr("data-open","true")}})})})(options)