Zhe*_*ang 1 html tabs zurb-foundation
我使用基础5.3与玉和表达.
我创建了一个选项卡组件,粘贴了Foundation Docs中的代码,但它似乎无法正常工作.
我包括了我认为足够的css和js,但是,只有标签中的活动一个可以显示,对于其他人,当我点击标签的标题时,它不会显示.
<!DOCTYPE html>
<html>
<head>
<title>Profile | Login System</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/css/foundation.min.css" rel="stylesheet">
</head>
<body>
<nav class="top-bar">
<ul class="title-area">
<li class="name">
<h1><a href="/">Homepage</a></h1>
</li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li><a href="/profile" class="button success">12</a></li>
</ul>
</section>
</nav>
<div class="row">
<div class="large-8 large-centered columns">
<br> <br>
<h1 class="text-center">Welcome to Login System!</h1>
<h2 class="text-center">This is Profile Page</h2>
<br>
<hr>
<br>
<ul class="tabs" data-tab>
<li class="tab-title active"><a href="#panel2-1">Tab 1</a></li>
<li class="tab-title"><a href="#panel2-2">Tab 2</a></li>
<li class="tab-title"><a href="#panel2-3">Tab 3</a></li>
<li class="tab-title"><a href="#panel2-4">Tab 4</a></li>
</ul>
<div class="tabs-content">
<div class="content active" id="panel2-1">
<p>First panel content goes here...</p>
</div>
<div class="content" id="panel2-2">
<p>Second panel content goes here...</p>
</div>
<div class="content" id="panel2-3">
<p>Third panel content goes here...</p>
</div>
<div class="content" id="panel2-4">
<p>Fourth panel content goes here...</p>
</div>
</div>
</div>
</div>
<script src="/js/foundation.min.js" type="text/javascript"></script>
<script src="/js/vendor/modernizr.js" type="text/javascript"></script>
<script src="/js/foundation/foundation.tab.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
嗯......我已经解决了这个恼人的问题.
我查看从Foundation下载的模板页面,我只是将我的使用foundation.min.css foundation.min.js modernizr.js jquery.js顺序改为与下面的官方订单相同的顺序.它有效......
<!doctype html> <html class="no-js" lang="en"> <head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script> </head> <body>
<div class="row">
<ul class="tabs" data-tab>
<li class="tab-title active"><a href="#panel2-1">Tab 1</a></li>
<li class="tab-title"><a href="#panel2-2">Tab 2</a></li>
<li class="tab-title"><a href="#panel2-3">Tab 3</a></li>
<li class="tab-title"><a href="#panel2-4">Tab 4</a></li>
</ul>
<div class="tabs-content">
<div class="content active" id="panel2-1">
<p>First panel content goes here...</p>
</div>
<div class="content" id="panel2-2">
<p>Second panel content goes here...</p>
</div>
<div class="content" id="panel2-3">
<p>Third panel content goes here...</p>
</div>
<div class="content" id="panel2-4">
<p>Fourth panel content goes here...</p>
</div>
</div>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script> </body> </html>