search

maxmert / maxmertkit

Maxmertkit, powerful, most customizable and easiest for usage mobile first front-end framework for web-development.
maxmert.com
MIT License
482 stars 70 forks source link

[question] Please document the use of tabs #89

Open ghost opened 9 years ago

ghost commented 9 years ago

Hi,

Can you please provide a minimal example of how to reach correct behaviour of tabs. This does not work for me:

<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://cdn.jsdelivr.net/maxmertkit/1.0.5/css/maxmertkit.css">

<!-- Latest compiled and minified JavaScript -->
<script src="http://cdn.jsdelivr.net/maxmertkit/1.0.5/js/maxmertkit.js"></script>

</head>
<body>
<script>
tabs = document.querySelectorAll("[data-toggle='tabs']")
for tab in tabs
    tab.tabs()
</script>

<div id="main-content" class="-container">
<ul class="-tabs -primary-">
    <li data-toggle="tabs" data-group="tabs1" data-target="#content1"><a>Tab 1</a></li>
    <li data-toggle="tabs" data-group="tabs1" data-target="#content2"><a>Tab 2</a></li>
    <li data-toggle="tabs" data-group="tabs1" data-target="#content3"><a>Tab 3</a></li>
    <li data-toggle="tabs" data-group="tabs1" data-target="#content4"><a>Tab 4</a></li>
</ul>
<div class="-row">
    <div id="content1" class="-col12">Content for tab 1</div>
    <div id="content2" class="-col12">Content for tab 2</div>
    <div id="content3" class="-col12">Content for tab 3</div>
    <div id="content4" class="-col12">Content for tab 4</div>
</div>
</div>
</body>
</html>