Tips for activating the next tab using the <a> or <button> element in Materialize:

<div class="col s12">
  <ul class="tabs">
   <li class="tab col s4"><a href="#test1"  class="active">tab1</a></li>
    <li class="tab col s4"><a href="#test2">tab2</a></li>
    <li class="tab col s4"><a href="#test4">tab3</a></li>
  </ul>
</div>

<div id='test1' class="col s12">
   <a href='#test2' >continue</a>
</div>
<div id='test2' class="col s12"></div>

My current focus is on transitioning to the following tab https://i.sstatic.net/7e1p2.pngafter triggering an action like clicking a button or link, such as the "Continue Button" in MaterializeCSS. To provide more clarity, I have included an image for reference.

javascripthtmlcssmaterialize

Answer №1

Check out the documentation for Materialize

Implement your code within the .click() event, as shown below.

$(document).ready(function() {
  $('ul.tabs').tabs();
  $("#btnContinue").click(function() {
    $('ul.tabs').tabs('select_tab', 'test2');
  });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>

<div class="col s12">
  <ul class="tabs">
    <li class="tab col s4"><a href="#test1" class="active">tab1</a>
    </li>
    <li class="tab col s4"><a href="#test2">tab2</a>
    </li>
    <li class="tab col s4"><a href="#test4">tab3</a>
    </li>
  </ul>
</div>

<div id='test1' class="col s12">
  <a id="btnContinue" href='#test2'>continue</a>
</div>
<div id='test2' class="col s12"></div>

Answer №2

When the document is ready, the button with id "btnContinue" will trigger a click event. This event will then find the element with id "tabs" and get the instance of the Materialize Tabs plugin. Finally, it will select the tab with the ID 'test2'.

Answer №3

The solution provided is not compatible with the specified versions of Jquery and materialize. Instead of using "select_tab", it is recommended to use the "select" method as "select_tab" may be deprecated in this context.

Below is a modified code snippet that is tested to work with JQuery v3.2.1 and Materialize v1.00-rc.2:

 $(document).ready(function(){
        $('ul.tabs').tabs();
        $('#btnContinue').click(function(){
            $('ul.tabs').tabs("select", "tab2");
        });     
 });

Answer №4

This method seems to work effectively, although I have observed a slight delay in processing as it scans through the entire document. By utilizing a wildcard selector (*) as demonstrated below, we can achieve the desired outcome. Alternatively, replacing the wildcard with (^) enables matching attributes that begin with a specified string (similar to class prefixes).

$(document).on('click', 'a[href*="#"]', function() {
    $('ul.tabs').tabs('select_tab', this.hash.slice(1));
});

Answer №5

function RefreshPage() {
  window.location.reload(true);
}
       
document.getElementById("refresh-button").onclick = function () {
  setTimeout(RefreshPage, 100);
};

<a id='refresh-button' href='next-tab'>click here to refresh</a>

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

Ways to retrieve the pending count of XMLHttpRequests in JavaScript

I am trying to figure out how to capture the count of pending xmlhttprequests in a web page using javascript while working with selenium and python. It seems like there is a useful link that could help me get this information, but I'm having trouble ...

javascriptpython-3.xselenium-webdriverxmlhttprequest

There seems to be nothing in the request.body that was sent

I've encountered an issue with my code - whenever I use postman or cURL to send a post request, the body is empty. const express= require('express'); const app = express(); app.use(express.json()) app.post('/',(req,res)=>{ ...

javascriptnode.jsexpressnodes

When assigning JSON to a class object, the local functions within the class became damaged

This is a demonstration of Object Oriented Programming in JavaScript where we have a parent Class called Book with a child class named PriceDetails. export class Book { name: String; author: String; series: String; priceDetails: Array<Price> ...

javascripttypescript

Using node-remote in Node.js application with NW.js

Does anyone have an example of how "node-remote" functions work when running certain logic from the server in an application? After adding "node-remote" : "hostip" to package.json, what should the server provide? Should it be a .js file with the functions ...

javascriptnode.jswebkit

Is it possible to use JavaScript to trigger the copy menu in iOS Safari programmatically?

Looking for a way to make it easy for users to copy text from a text input field to the clipboard on iOS/Safari. While there is no direct way to do this programmatically on this platform, I'm hoping to enhance the user experience as much as possible. ...

javascriptiossafaricopy

What is the best way to determine the value of a variable specific to my scenario?

Using the Angular framework, I am trying to determine if the data variable updates when a button is clicked. Here is an example: <button ng-click='change()'>{{data}}</button> I want to verify if the data changes or log the data var ...

javascriptangularjs

Error message: When attempting to access firebase data in our app, an uncaught TypeError is thrown, stating that it is unable to read properties of undefined while trying to access '

While using Firebase 9 and Vue3, I encountered an error when trying to access data from a document. Even though the data was correctly logged in the console, it was showing up as undefined. Additionally, I made sure that the data was loaded before attempti ...

javascriptvue.jsgoogle-cloud-firestorefirebase-authentication

Using a PHP WordPress Loop, eliminate the comma following the final object in the Schema array

My Google Schema Markup for a "Product" includes a loop that displays "Reviews". Below is an excerpt of the code: "review": [ <?php $args = array( 'post_type' => 'my_reviews', & ...

javascriptphpjson

The art of encapsulating JSON response objects in Ember Objects with a deep layer of wrapping

Currently, I am engaged in a project using Ember where I retrieve a complex JSON response in a Route's model function. In the associated template, I exhibit attributes of the response. Some of these attributes allow for specific actions that result in ...

javascriptjsonember.js

Transfer to the following port within an Express server application

Currently, I have a server running on localhost:3000. However, it is already occupied. How can I redirect to the next available port number when running a separate server? ...

javascriptnode.jsexpress

A guide on accessing header response information in Vue.js

Currently, I am operating on my localhost and have submitted a form to a remote URL. The process unfolds in the following sequence: Submission of a form from localhost Being redirected to a remote URL Sending a response back from the Remote URL to localh ...

javascriptvue.js

How to extract an integer from a particular format of ID string using JavaScript

Extracting ID variables from a text box, where these variables are subject to change: SC00021 var IdCode1 = "SC00021"; var res = IdCode1.slice(5, 7); Output: 21 Is there a way to automatically determine the position following the zeros? ...

javascriptjquerystringslice

Creating a tree-like design with the spry accordion換stepping up your spr

I want to style my accordion in a way that it resembles a tree structure. How can I achieve this using CSS? For example: + should be displayed when the accordion tab is closed, and - when the accordion is open. <div class="Accordion" id="systemAccordi ...

javascriptjquerycssspry

What is the process for embedding JQuery within the <body> tags in Joomla 3.1?

I inserted the following code into my default.php file in Joomla 3.1. <?php JHtml::_('jquery.framework'); JFactory::getDocument()->addScript(JURI::root().'template/mytemplate/js/jquery.min.js'); ?> However, this code only pl ...

javascriptphpjqueryhtmljoomla

Window.open function failing to function in Internet Explorer even when prompted by the user

Similar Inquiry: Issue with 'window.open()' function in IE8 - Error Message: Invalid argument. Take a look at this page: http://jsfiddle.net/S7Crc/ It is evident that when "click me" is clicked, a window opens correctly in Firefox but not i ...

javascriptjqueryinternet-explorerbrowserwindow

Modifying Row Color in Bootstrap 3: A Step-by-Step Guide

I'm trying to customize the background color of alternating rows in a Bootstrap 3 grid. I attempted to use CSS and add it to the class within the div, but unfortunately, the color isn't changing as expected. Below is the CSS code I used: .row-b ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Unable to retrieve data from a nested object within a JSON structure

In my React project, I have created a function component like the one below: function FetchData() { const [randomUserData, setRandomUserData] = useState(''); const url = 'https://randomuser.me/api/'; const fetchData = () => { ...

javascriptreactjsjson

Is it a common issue for a Nuxt.js page using Keycloak.js authentication middleware to reload twice when the browser window is refreshed? Also, it seems that the N

My current setup involves implementing authentication with Keycloak in a Nuxt.js middleware using the code below: import Keycloak from 'keycloak-js' const keycloak = new Keycloak({ url: 'http://localhost:8080/auth', realm: 'd ...

javascriptvue.jsvue-routerkeycloaknuxt.js

Combining multiple JSON strings into a single object using JavaScript

I am facing an issue with parsing a JSON output that contains two strings with specific formats: [{"device_id":"9700015","update_time":"2017-01-04 18:30:00","sensor_value":"1287.6"}] [{"device_id":"9700016","update_time":"2016-12-31 18:30:00","senso ...

javascriptarraysjson

conceal a division beneath a YouTube video frame upon clicking

I need to hide the 'div .blind' element when a YouTube video (inside 'div #player') is clicked. How can I achieve this? Here's an example: JS: ... var player; function onYouTubeIframeAPIReady() { player = new YT.Player('pl ...

javascripthtmlcssyoutube