文章/答案/技术大牛

发布

社区首页 >问答首页 >单击选项卡时显示两个单独div的内容

问单击选项卡时显示两个单独div的内容
EN

Stack Overflow用户

提问于 2018-07-02 23:46:37

回答 1查看 401关注 0票数 0

我正在使用MaterializeCSS选项卡在我的网站上显示内容。我想每个标签，以启动两个div的内容一次，但我有问题，使这项工作。

我尝试在每个选项卡上使用data-target，但都不起作用。现在，我在每个选项卡中包含两个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();
  });

javascript

jquery

html

materialize

回答 1

Stack Overflow用户

发布于 2018-07-04 17:46:33

 $(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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51139728

复制

相似问题

问单击选项卡时显示两个单独div的内容
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问单击选项卡时显示两个单独div的内容EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问单击选项卡时显示两个单独div的内容
EN