The functionality of Materialize CSS tabs appears to be malfunctioning

I've been working on a mobile profile UI and using materialize css, but unfortunately the tabs aren't functioning properly.

Here's the code snippet:

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

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>

Appreciate any assistance provided!

javascripthtmlcssmaterialize

Answer №1

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

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


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

  <script>
    var element = document.querySelector('.tabs');
    var instance = M.Tabs.init(element, {});
  </script>

Answer №2

Make sure to include jQuery by adding this script tag: 

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

Answer №3

You only required one modification in your html code.

Make sure to include the necessary JQuery library, as it is essential for your page. You can easily debug such issues using the 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

Answer №4

Encountered a similar issue. I discovered that in my scenario, an additional JavaScript code was conflicting with Materialize JS. It is advisable to minimize the amount of unnecessary JavaScript on the page where the tabs are located.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Vue Multiselect has different styles in development environment compared to production environment

After including <style src="vue-multiselect/dist/vue-multiselect.min.css"> in my Vue component, I noticed that the styles are applied when running npm run dev, but not when running npm run prod. How can I resolve this issue? <template& ...

javascriptvue.jsvue-multiselect

Attach an @click event to the href attributes within an array

I am currently working on code to populate a datatable with rows. Each row in the datatable contains an update link, which when clicked should trigger the ShowModal() method. How can I invoke the ShowModal() function using this <a> element? < ...

javascriptvue.js

Can an image map area be identified using radial coordinates?

While I have experience with online Imagemap Generators for rectangular or circular areas in HTML pages, things get a bit tricky when dealing with pie-shaped sections. When trying to make each pie slice a separate area, the image map code generated by thes ...

javascripthtmlcsshighcharts

Challenges with converting JSON into PHP code

I am attempting to output the JSON response below to HTML using PHP. Here is the JSON response : { "data": { "onward": [ { "origin": "LHR", "id": "SB15", "rating": 0, "destination": "FKK", "PricingSolut ...

phphtmljson

When attempting to upload an image to Firebase using JavaScript within an HTML file, I encountered an error in the console after clicking on the 'choose file' button

I've been working on this code to store an image in Firebase storage. However, I keep encountering an error that says "cannot read property of 'addEventListener' of null" when trying to upload the image. <!DOCTYPE html> <html> & ...

javahtmlfirebasefirebase-storage

Create a spinning animation similar to the BBC iPlayer rotation effect using HTML5, Canvas, JavaScript, and other

Looking to achieve a dynamic effect similar to the one showcased on the BBC iPlayer, where circles and arcs gracefully rotate around a central point. To create this effect, I am aware that utilizing the Canvas element and implementing drawing code for the ...

javascriptjquerycsshtmlcanvas

Switch the accordion to open or close

I am struggling to create an accordion menu that toggles open and close using the same button. Right now, it only opens and I cannot figure out how to make it close as well. Below is my current code, or you can view it on jsFiddle: http://jsfiddle.net/nd ...

javascriptjquerycss

Implementing Pagination or Infinite Scroll to Instagram Feed

Currently, I am working on creating an Instagram feed for a fashion campaign where users can hashtag their photos with a specific tag. Using the Instagram API, the script will pull all recent posts with this common tag to display on the webpage. Instagram ...

javascripthtmlajaxpaginationinstagram

Ending a connection to MS SQL server in node.js with mssql library

In my journey to write a node.js script for querying an MSSQL database, I find myself navigating the realm of JavaScript, node.js, and VSCode with limited SQL knowledge. While I have managed to piece together working code, the issue lies in the connection ...

javascriptsql-servernode.js

Sorting in MongoDB aggregation operations

I have a database containing user activities, and I want to calculate the number of active users and activities they performed each month. The results should be sorted by year first and then by month within each year. Here is my query: query = { ...

javascriptpythonmongodbsorting

The process by which Expressjs determines the appropriate error handler to execute when multiple error handlers are present

I've been wondering, how does Express decide which error handler to call (next(err)) when there are multiple error handlers in place? ...

javascriptnode.jsexpresserror-handling

Enhance your user interface by customizing the expand icon in the React material

Currently, I am utilizing Material-table with a focus on Tree-data. You can find detailed information about this feature here: https://material-table.com/#/docs/features/tree-data. While attempting to implement the provided example, I am encountering diff ...

javascriptreactjsmaterial-uimaterial-designmaterial-table

Ways to include a loading animation while processing calculations on a website

I'm currently in the process of building a website that involves performing calculations and plotting a graph. My goal is to have a loading animation displayed while the computations are taking place, and then have it disappear once the calculations a ...

javascripthtmlcssfrontend

Tips for disabling scrolling on touch screens for input elements

I am facing an issue with a modal that is positioned on top of a scrollable document body. I am trying to prevent the scrolling of the document when I swipe my finger on the modal. $(document).on('touchstart touchmove', function(e){ e.preventDef ...

javascriptjquerymodal-dialogmobile-safari

Error: The function .default.auth.signout is not recognized in the REACT and Firebase environment

I've come across several error questions on StackOverflow, but most remain unanswered. The ones that are answered don't seem to solve my issue. I need help debugging this particular error. In my REACT project using Firebase, I'm working on ...

javascriptreactjsfirebase-authentication

What is the best way to retrieve an AJAX response in advance of sending it to a template when utilizing DATAT

Recently, I've been working on integrating log tables into my admin panel using the datatable plugin. Despite setting up an ajax call in my datatable, I'm facing issues with retrieving the response before sending it to the table. Here's a s ...

javascriptphpjqueryajaxdatatable

Tips on patiently awaiting the completion of resource loading

Seeking guidance from AngularJS experts as I develop an AngularJS application with a control suite comprising a loading screen and a showing screen defined in HTML. The data that needs to be manipulated is stored in JSON files, like the one below: { "St ...

javascriptjquerycssjsonangularjs

Switch the class of the child element from the previous element using jQuery

I'm attempting to create a toggle effect on click that switches a class (font awesome) like this: $( ".expandTrigger" ).click(function() { $( ".expand" ).first().toggle( "fast", function() {}); if ( $( this ).prev().child().is( ".fa-plus-cir ...

javascriptjquery

What methods can be used to crop and style images in a similar manner using html and css?

Is there a way to replicate this specific method? I attempted to achieve the same look by using CSS masking, but the results weren't pleasing. Does anyone have suggestions on how to accomplish this using HTML/CSS? ...

htmlcssimagestylesheet

What is the best way to verify HTML using RSS?

Looking to improve my skills in HTML/CSS/PHP development, I'm faced with a challenge when it comes to validating code that contains content beyond my control, such as an RSS feed. For instance, on my home page, which is a .php document containing bot ...

phphtmlcssvalidation