我正在使用MaterializeCSS选项卡在我的网站上显示内容。我希望每个标签可以一次启动两个div的内容,但是在使这项工作上遇到麻烦。
我尝试在每个选项卡上使用数据目标,但这不起作用。现在,我在每个标签中都包含两个href,但这也不起作用。如果有人可以提供帮助,我将不胜感激。
<div class="menu-section">
<div class="row">
<ul class="tabs">
<li class="tab col s3"><a class="active" href="#overview,#test1">Overview</a></li>
<li class="tab col s3"><a href="#howto,#test2">How to use</a></li>
<li class="tab col s3"><a href="#integration,#test3">Integration</a></li>
<li class="tab col s3"><a href="#compatibility,#test4">Compatibility</a></li>
<li class="tab col s3"><a href="#terms,#test5">Terms of Service</a></li>
</ul>
</div>
<div id="overview" class="col s12">test 1</div>
<div id="howto" class="col s12">test 2</div>
<div id="integration" class="col s12">test 3</div>
<div id="compatibility" class="col s12">test 4</div>
<div id="terms" class="col s12">test 5</div>
</div>
<div id="test1" class="col s12">test 1</div>
<div id="test2" class="col s12">test 2</div>
<div id="test3" class="col s12">test 3</div>
<div id="test4" class="col s12">test 4</div>
<div id="test5" class="col s12">test 5</div>
还有我的jquery初始化:
$(document).ready(function(){
$('ul.tabs').tabs();
});
答案 0 :(得分:0)
$(document).ready(function(){
$('.tabs').tabs();
});
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<script
src="http://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
</head>
<title>Dynamic Drop Down List</title>
<body>
<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col s3"><a class="active" href="#overview">Overview</a></li>
<li class="tab col s3"><a href="#howto">How to use</a></li>
<li class="tab col s3"><a href="#integration">Integration</a></li>
<li class="tab col s3"><a href="#compatibility">Compatibility</a></li>
<li class="tab col s3"><a href="#terms">Terms of Service</a></li>
</ul>
</div>
<div id="overview" class="col s12">test 1</div>
<div id="howto" class="col s12">test 2</div>
<div id="integration" class="col s12">test 3</div>
<div id="compatibility" class="col s12">test 4</div>
<div id="terms" class="col s12">test 5</div>
</div>
</body>
</html>