<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.min.css"/>
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script src="./bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<title>Tabs and Pills</title>
<script>
function showHTMLContent(showElement, codeElement) {
$(showElement).html($('<div/>').text($(codeElement).html()).html());
}
$(function() {
showHTMLContent('#showMenuContainer', '#menuContainer');
showHTMLContent('#showTabContainer', '#tabContainer');
showHTMLContent('#showTabDropContainer', '#tabDropContainer');
showHTMLContent('#showTabContentContainer', '#tabContentContainer');
$('#list-inline').click(function() {
if (this.checked) {
$('#menu').addClass('list-inline');
} else {
$('#menu').removeClass('list-inline');
}
showHTMLContent('#showMenuContainer', '#menuContainer');
});
$(':radio[name="tabStyle"]').click(function() {
if (this.checked) {
$('#tab').attr('class', $(this).val());
}
showHTMLContent('#showTabContainer', '#tabContainer');
});
$(':radio[name="tabDropStyle"]').click(function() {
if (this.checked) {
$('#tabDrop').attr('class', $(this).val());
}
showHTMLContent('#showTabDropContainer', '#tabDropContainer');
});
$('#tabContentStyleTab').click(function() {
if (this.checked) {
$('#navigation').attr("class", "nav nav-tabs");
$('a[name="navLink"]').attr("data-toggle", "tab");
}
showHTMLContent('#showTabContentContainer', '#tabContentContainer');
});
$('#tabContentStylePill').click(function() {
if (this.checked) {
$('#navigation').attr("class", "nav nav-pills");
$('a[name="navLink"]').attr("data-toggle", "pill");
}
showHTMLContent('#showTabContentContainer', '#tabContentContainer');
});
});
</script>
</head>
<body>
<div class="container">
<h1>菜单</h1>
<form>
<input type="checkbox" id="list-inline"> list-inline <br>
</form>
<h2>代码</h2>
<pre id="showMenuContainer"></pre>
<h2>样式</h2>
<div id="menuContainer">
<ul id="menu">
<li><a href="#">主页</a></li>
<li><a href="#">博客</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">关于</a></li>
</ul>
</div>
<br><br>
<h1>Tab</h1>
<form>
<input type="radio" name="tabStyle" value="nav nav-tabs" checked> nav nav-tabs <br>
<input type="radio" name="tabStyle" value="nav nav-tabs nav-justified"> nav nav-tabs nav-justified <br>
<input type="radio" name="tabStyle" value="nav nav-pills"> nav nav-pills <br>
<input type="radio" name="tabStyle" value="nav nav-pills nav-justified"> nav nav-pills nav-justified <br>
<input type="radio" name="tabStyle" value="nav nav-pills nav-stacked"> nav nav-pills nav-stacked <br>
</form>
<h2>代码</h2>
<pre id="showTabContainer"></pre>
<h2>样式</h2>
<div id="tabContainer">
<ul class="nav nav-tabs" id="tab">
<li class="active"><a href="#">主页</a></li>
<li><a href="#">博客</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">关于</a></li>
</ul>
</div>
<br><br>
<h1>Tab and Dropdown</h1>
<form>
<input type="radio" name="tabDropStyle" value="nav nav-tabs" checked> nav nav-tabs <br>
<input type="radio" name="tabDropStyle" value="nav nav-pills"> nav nav-pills <br>
<input type="radio" name="tabDropStyle" value="nav nav-pills nav-stacked"> nav nav-pills nav-stacked <br>
</form>
<h2>代码</h2>
<pre id="showTabDropContainer"></pre>
<h2>样式</h2>
<div id="tabDropContainer">
<ul class="nav nav-tabs" id="tabDrop">
<li class="active"><a href="#">主页</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">博客
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">技术</a></li>
<li><a href="#">生活</a></li>
<li><a href="#">厨艺</a></li>
</ul>
</li>
<li><a href="#">新闻</a></li>
<li><a href="#">关于</a></li>
</ul>
</div>
<br><br>
<h1>Tab and Content</h1>
<form>
<input type="radio" id="tabContentStyleTab" name="tabContentStyle" checked> Tab Style <br>
<input type="radio" id="tabContentStylePill" name="tabContentStyle"> Pill Style <br>
</form>
<h2>代码</h2>
<pre id="showTabContentContainer"></pre>
<h2>样式</h2>
<div id="tabContentContainer">
<ul class="nav nav-tabs" id="navigation">
<li class="active"><a data-toggle="tab" href="#home" name="navLink">首页</a></li>
<li><a data-toggle="tab" href="#blog" name="navLink">博客</a></li>
<li><a data-toggle="tab" href="#news" name="navLink">新闻</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>首页</h3>
<p>这是首页</p>
</div>
<div id="blog" class="tab-pane fade">
<h3>博客</h3>
<p>欢迎来到我的博客！</p>
</div>
<div id="news" class="tab-pane fade">
<h3>新闻</h3>
<p>这里是新闻</p>
</div>
</div>
</div>
<br><br><br><br>
</div>
</body>
</html>Bootstrap学习笔记 19 - Tabs
猜你喜欢
转载自blog.csdn.net/u011304970/article/details/78685802
今日推荐
周排行