Materialize css选项卡不起作用

Question

I am making profile ui for mobile. 我正在为移动设备制作个人资料。 I am using materialize css for that.. But in my case it's not working. 我正在使用物化css ..但在我的情况下，它不起作用。 I mean the tabs are not working. 我的意思是标签不起作用。

So here is the code. 所以这是代码。

http://codepen.io/anon/pen/VmmJWv http://codepen.io/anon/pen/VmmJWv

html: HTML：

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!DOCTYPE html>
<html>
<head>

  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>

  <title>Profile</title>
  <link rel="stylesheet" href="profile.css">
</head>
<body>
<div class="nav">

</div>
<div class="profile">

<div class="cover-img">
<img id="cover-img" src="https://cdn2.xyztimes.com/wp-content/uploads/2015/05/Material-Wallpaper-11.1-696x407.png" width="100%" height="150px" >
</div>
<div class="profile-meta z-depth-3">
<div class="profile-img">
<img id="profile-img" src="http://orig02.deviantart.net/e65e/f/2016/145/0/f/profile_picture_by_the_spooky_man-da3t6n4.png" height="100px" width="100px">
</div>

<div class="profile-name">
<p class="profile-name">Profile Name</p>
</div>
<div class="profile-id">
<p class="profile-id">Profile ID</p>
</div>
<div class="profile-desc">
<p class="profile-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sollicitudin lectus, et gravida mauris. </p>
</div>
<ul class="profile-stats">
  <a><li><span>1m</span>Followers</li></a>
  <a><li><span>100</span>Following</li></a>
  <a><li><span>758</span>Posts</li></a>
  <a><li><span>84</span>Helpful</li></a>
</ul>

<div class="profile-btn"><a class="waves-effect waves-light btn center-btn purple">Follow</a></div>
</div>
</div>
<br>

<div class="row">
  <div class="col s12">
    <ul class="tabs">
      <li class="tab col s3"><a href="#test1">Test 1</a></li>
      <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>

      <li class="tab col s3"><a href="#test4">Test 4</a></li>
    </ul>
  </div>
  <div id="test1" class="col s12">Test 1</div>
  <div id="test2" class="col s12">Test 2</div>

  <div id="test4" class="col s12">Test 4</div>
</div>

</body>
</html>
<script>
$(document).ready(function(){
  $('ul.tabs').tabs();
});
$(document).ready(function(){
  $('ul.tabs').tabs('select_tab', 'tab_id');
});

</script>

Thanx for the help........ Thanx的帮助........

Answer 1

You just needed 1 modification in you html. 您只需要在html中进行一次修改。

You are missing to include the Jquery which is required. 您缺少包含所需的Jquery。 You can check these issues easily in developer console. 您可以在开发者控制台中轻松检查这些问题。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!DOCTYPE html>
<html>
<head>

  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>

  <title>Profile</title>
  <link rel="stylesheet" href="profile.css">
</head>
<body>
<div class="nav">

</div>
<div class="profile">

<div class="cover-img">
<img id="cover-img" src="https://cdn2.xyztimes.com/wp-content/uploads/2015/05/Material-Wallpaper-11.1-696x407.png" width="100%" height="150px" >
</div>
<div class="profile-meta z-depth-3">
<div class="profile-img">
<img id="profile-img" src="http://orig02.deviantart.net/e65e/f/2016/145/0/f/profile_picture_by_the_spooky_man-da3t6n4.png" height="100px" width="100px">
</div>

<div class="profile-name">
<p class="profile-name">Profile Name</p>
</div>
<div class="profile-id">
<p class="profile-id">Profile ID</p>
</div>
<div class="profile-desc">
<p class="profile-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sollicitudin lectus, et gravida mauris. </p>
</div>
<ul class="profile-stats">
  <a><li><span>1m</span>Followers</li></a>
  <a><li><span>100</span>Following</li></a>
  <a><li><span>758</span>Posts</li></a>
  <a><li><span>84</span>Helpful</li></a>
</ul>

<div class="profile-btn"><a class="waves-effect waves-light btn center-btn purple">Follow</a></div>
</div>
</div>
<br>

<div class="row">
  <div class="col s12">
    <ul class="tabs">
      <li class="tab col s3"><a href="#test1">Test 1</a></li>
      <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>

      <li class="tab col s3"><a href="#test4">Test 4</a></li>
    </ul>
  </div>
  <div id="test1" class="col s12">Test 1</div>
  <div id="test2" class="col s12">Test 2</div>

  <div id="test4" class="col s12">Test 4</div>
</div>



</body>
</html>

<script>
$(document).ready(function(){
  $('ul.tabs').tabs();
});
$(document).ready(function(){
  $('ul.tabs').tabs('select_tab', 'tab_id');
});

</script>

Updated Codepen : http://codepen.io/anon/pen/mOONjj 更新了Codepen： http ：//codepen.io/anon/pen/mOONjj

Answer 2

别忘了添加jQuery <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>

Answer 3

Had the same problem. 有同样的问题。 On my case there was another JS code interrupting the Materialize JS. 在我的情况下，有另一个JS代码中断Materialize JS。 Avoid unnecessary JS code for the page containing the tabs. 避免包含选项卡的页面不必要的JS代码。

Materialize css选项卡不起作用

问题描述

3 个解决方案

解决方案1
2 2016-11-18 13:12:29

解决方案2
1 已采纳 2016-11-18 13:08:57

解决方案3
0 2019-03-05 13:18:29

Materialize css选项卡不起作用

问题描述

3 个解决方案

解决方案1 2 2016-11-18 13:12:29

解决方案2 1 已采纳 2016-11-18 13:08:57

解决方案3 0 2019-03-05 13:18:29

解决方案1
2 2016-11-18 13:12:29

解决方案2
1 已采纳 2016-11-18 13:08:57

解决方案3
0 2019-03-05 13:18:29