I'm using this
https://material.io/develop/web/components/tabs/tab-bar/
To make a tab bar
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<div class="mdc-tab-bar" role="tablist">
<div class="mdc-tab-scroller">
<div class="mdc-tab-scroller__scroll-area">
<div class="mdc-tab-scroller__scroll-content">
<button class="mdc-tab mdc-tab--active" role="tab" aria-selected="true" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__icon material-icons" aria-hidden="true">title</span>
<span class="mdc-tab__text-label">Name</span>
</span>
<span class="mdc-tab-indicator mdc-tab-indicator--active">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
<button class="mdc-tab" role="tab" aria-selected="true" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__icon material-icons" aria-hidden="true">style</span>
<span class="mdc-tab__text-label">Tags</span>
</span>
<span class="mdc-tab-indicator">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
<button class="mdc-tab" role="tab" aria-selected="true" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__icon material-icons" aria-hidden="true">favorite</span>
<span class="mdc-tab__text-label">Status</span>
</span>
<span class="mdc-tab-indicator">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
<button class="mdc-tab" role="tab" aria-selected="true" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__icon material-icons" aria-hidden="true">warning</span>
<span class="mdc-tab__text-label">Restriction</span>
</span>
<span class="mdc-tab-indicator">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
<button class="mdc-tab" role="tab" aria-selected="true" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__icon material-icons" aria-hidden="true">keyboard_arrow_right</span>
<span class="mdc-tab__text-label">Other</span>
</span>
<span class="mdc-tab-indicator">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
</div>
</div>
</div>
</div>
and this JS
const tabBar = mdc.tabBar.MDCTabBar.attachTo(document.querySelector('.mdc-tab-bar'));
tabBar.listen('MDCTab:interacted', function (event) {
alert(1);
});
document.querySelectorAll('.mdc-tab-bar button')[3].click();
//tabBar.activateTab(3);
Invoking the click works (via code or manually with mouse), and emits the event and alerts "1". However I would rather use the activateTab function, but it only makes the tab active, but does not emit the event.
Does anyone know what's wrong here?
The MDCTab:interacted event is emitted before tab activation which is why it is not triggered when using the activateTab method. MDCTab:interacted is actually used by the MDC tab bar to know which tab to activate. Depending on what your end goal is, you may be able to get what you need by using the MDCTabBar:activated event instead since it will be triggered by the activateTab method and provides the index of the activated tab in the event detail data.
const tabBar = mdc.tabBar.MDCTabBar.attachTo(document.querySelector('.mdc-tab-bar'));
const tabs = document.querySelectorAll('.mdc-tab');
tabBar.listen('MDCTabBar:activated', (event) => {
const tab = tabs[event.detail.index];
console.log(tab.children[0].children[1].textContent, 'tab activated');
});
tabBar.activateTab(3); // activate "Restriction" tab
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Material Tabs Example</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
</head>
<body>
<div class="mdc-tab-bar" role="tablist">
<div class="mdc-tab-scroller">
<div class="mdc-tab-scroller__scroll-area">
<div class="mdc-tab-scroller__scroll-content">
<button class="mdc-tab mdc-tab--active" role="tab" aria-selected="true" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__icon material-icons" aria-hidden="true">title</span>
<span class="mdc-tab__text-label">Name</span>
</span>
<span class="mdc-tab-indicator mdc-tab-indicator--active">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
<button class="mdc-tab" role="tab" aria-selected="false" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__icon material-icons" aria-hidden="true">style</span>
<span class="mdc-tab__text-label">Tags</span>
</span>
<span class="mdc-tab-indicator">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
<button class="mdc-tab" role="tab" aria-selected="false" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__icon material-icons" aria-hidden="true">favorite</span>
<span class="mdc-tab__text-label">Status</span>
</span>
<span class="mdc-tab-indicator">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
<button class="mdc-tab" role="tab" aria-selected="false" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__icon material-icons" aria-hidden="true">warning</span>
<span class="mdc-tab__text-label">Restriction</span>
</span>
<span class="mdc-tab-indicator">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
<button class="mdc-tab" role="tab" aria-selected="false" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__icon material-icons" aria-hidden="true">keyboard_arrow_right</span>
<span class="mdc-tab__text-label">Other</span>
</span>
<span class="mdc-tab-indicator">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
</div>
</div>
</div>
</div>
</body>
</html>
Related
I am making some mapping with moviedb api using innerhtml, the problem i am having is with the Main.appendChild where the appendChild is handle as a property and not as a function. I am having the same issue in the console with the entire main array and i think it might having something to do with the fact that i am declering the main object to a htmlelemnt then to a array. Btw i have given up on this project hence it wasnt worth the extra time that it took
this is kinda of a filler part so excuse me pls.
const API_KEY = "api_key=0a2c754df24f03f4197199045aedf7de";
const BASE_URL = "https://api.themoviedb.org/3";
const API_URL = BASE_URL + "/discover/movie?sort_by=popularity.desc&" + API_KEY;
const IMG_URL = "https://image.tmdb.org/t/p/w500";
const main = document.getElementById("main");
getMovies(API_URL);
function getMovies(url) {
fetch(url).then(res => res.json())
.then(data => {
console.log(data.results);
showMovies(data.results);
})
}
function showMovies(data) {
main.innerHTML = " ";
data.forEach(main => {
const { title, vote_average, overview, poster_path } = main;
const movieEl = document.createElement("div");
movieEl.classList.add("movie");
movieEl.innerHTML = `
<img
src="${IMG_URL + poster_path} alt-""${title}"
/>
</a>
</div>
<div class="list-content">
<h2>
<a href="single-movie.html" class="text-black"
></a
>
</h2>
<span class="list-meta">
<span class="list-meta-item"
><i class="fas fa-clock"></i> 2018</span
>
<a href="#" class="list-meta-item"
><i class="fas fa-star"></i> ${vote_average}</a
>
</span>
<p>
${overview}
</p>
</div>
`;
main.appendChild(movieEl);
});
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="description" content="" />
<meta name="author" content="" />
<link rel="icon" href="img/favicon.png" />
<title>Movies - Get Booked Online</title>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<link
href="https://fonts.googleapis.com/css?family=Roboto"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
crossorigin="anonymous"
/>
<!-- Bootstrap core CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
crossorigin="anonymous"
/>
</head>
<body>
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="index.html"><img src="img/logo.png" /></a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarsExampleDefault"
aria-controls="navbarsExampleDefault"
aria-expanded="false"
aria-label="Toggle navigation"
>
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.html"
><i class="fas fa-home"></i> Home</a
>
</li>
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fas fa-film"></i> Movies</a>
</li>
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
data-toggle="dropdown"
href="#"
role="button"
aria-haspopup="true"
aria-expanded="false"
><i class="fas fa-crown"></i> Genre</a
>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Adventure</a>
<a class="dropdown-item" href="#">Horror</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Animation</a>
<a class="dropdown-item" href="#">Comedy</a>
<a class="dropdown-item" href="#">Fantasy</a>
</div>
</li>
</ul>
<a class="nav-button" href="movies.html"
><i class="fas fa-newspaper"></i> Latest Movies</a
>
</div>
</nav>
<!-- breadcrumbs -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item active" aria-current="page">Movies</li>
</ol>
</nav>
<!-- /breadcrumbs -->
<!-- movie cards -->
<div class="container">
<div class="alert alert-primary" role="alert">
<i class="fas fa-exclamation-circle"></i> The following movies are
currently in theaters.
</div>
<main id ="main">
<div class="row">
<div class="col-sm-6 col-xs-6">
<div class="list mb-2">
<div class="list-header">
<a class="list-header-image">
<img
src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/wCvTSaIQEweNdsU98usvt9re7fq.jpg"
/>
</a>
</div>
<div class="list-content">
<h2>
<a href="single-movie.html" class="text-black"
>Avengers: Infinity War</a
>
</h2>
<span class="list-meta">
<span class="list-meta-item"
><i class="fas fa-clock"></i> 2018</span
>
<a href="#" class="list-meta-item"
><i class="fas fa-star"></i> 8.8</a
>
</span>
<p>
As the Avengers and their allies have continued to protect the
world from threats too large for any one hero to handle, a new
danger has emerged from the cosmic shadows: Thanos.
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-xs-6">
<div class="list mb-2">
<div class="list-header">
<a href="single-movie.html" class="list-header-image">
<img
src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/to0spRl1CMDvyUbOnbb4fTk3VAd.jpg"
/>
</a>
</div>
<div class="list-content">
<h2>
Deadpool 2
</h2>
<span class="list-meta">
<span class="list-meta-item"
><i class="fas fa-clock"></i> 2018</span
>
<a href="#" class="list-meta-item"
><i class="fas fa-star"></i> 8.3</a
>
</span>
<p>
Wisecracking mercenary Deadpool battles the evil and powerful
Cable and other bad guys to save a boy's life.
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-xs-6">
<div class="list mb-2">
<div class="list-header">
<a href="single-movie.html" class="list-header-image">
<img
src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/uxzzxijgPIY7slzFvMotPv8wjKA.jpg"
/>
</a>
</div>
<div class="list-content">
<h2>
Black Panther
</h2>
<span class="list-meta">
<span class="list-meta-item"
><i class="fas fa-clock"></i> 2018</span
>
<a href="#" class="list-meta-item"
><i class="fas fa-star"></i> 7.6</a
>
</span>
<p>
King T'Challa returns home from America to the reclusive,
technologically advanced African nation of Wakanda to serve as
his country's new leader. However, T'Challa soon finds that he
is challenged for the throne by factions within his own country
as well as without.
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-xs-6">
<div class="list mb-2">
<div class="list-header">
<a href="single-movie.html" class="list-header-image">
<img
src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/jjPJ4s3DWZZvI4vw8Xfi4Vqa1Q8.jpg"
/>
</a>
</div>
<div class="list-content">
<h2>Fifty Shades Freed</h2>
<span class="list-meta">
<span class="list-meta-item"
><i class="fas fa-clock"></i> 2018</span
>
<a href="#" class="list-meta-item"
><i class="fas fa-star"></i> 4.4</a
>
</span>
<p>
A young Silicon Valley tech-titan enlists a veteran surgeon with
a controversial past in starting a hospital with a cutting-edge,
new school approach to medicine.
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-xs-6">
<div class="list mb-2">
<div class="list-header">
<a href="single-movie.html" class="list-header-image">
<img
src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/vLCogyfQGxVLDC1gqUdNAIkc29L.jpg"
/>
</a>
</div>
<div class="list-content">
<h2>
Red Sparrow
</h2>
<span class="list-meta">
<span class="list-meta-item"
><i class="fas fa-clock"></i> 2018</span
>
<a href="single-movie.html" class="list-meta-item"
><i class="fas fa-star"></i> 6.7</a
>
</span>
<p>
Prima ballerina, Dominika Egorova faces a bleak and uncertain
future after she suffers an injury that ends her career. She
soon turns to Sparrow School, a secret intelligence service that
trains exceptional young people to use their minds and bodies as
weapons.
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-xs-6">
<div class="list mb-2">
<div class="list-header">
<a href="single-movie.html" class="list-header-image">
<img
src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/30oXQKwibh0uANGMs0Sytw3uN22.jpg"
/>
</a>
</div>
<div class="list-content">
<h2>
Rampage
</h2>
<span class="list-meta">
<span class="list-meta-item"
><i class="fas fa-clock"></i> 2018</span
>
<a href="#" class="list-meta-item"
><i class="fas fa-star"></i> 6.4</a
>
</span>
<p>
Primatologist Davis Okoye shares an unshakable bond with George,
the extraordinarily intelligent, silverback gorilla who has been
in his care since birth. But a rogue genetic experiment gone
awry mutates this gentle ape into a raging creature of enormous
size.
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-xs-6">
<div class="list mb-2">
<div class="list-header">
<a href="single-movie.html" class="list-header-image">
<img
src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/pU1ULUq8D3iRxl1fdX2lZIzdHuI.jpg"
/>
</a>
</div>
<div class="list-content">
<h2>
<a href="single-movie.html" class="text-black"
>Ready Player One</a
>
</h2>
<span class="list-meta">
<span class="list-meta-item"
><i class="fas fa-clock"></i> 2018</span
>
<a href="#" class="list-meta-item"
><i class="fas fa-star"></i> 8.8</a
>
</span>
<p>
When the creator of a popular video game system dies, a virtual
contest is created to compete for his fortune.
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-xs-6">
<div class="list mb-2">
<div class="list-header">
<a href="single-movie.html" class="list-header-image">
<img
src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/85R8LMyn9f2Lev2YPBF8Nughrkv.jpg"
/>
</a>
</div>
<div class="list-content">
<h2>
Game Night
</h2>
<span class="list-meta">
<span class="list-meta-item"
><i class="fas fa-clock"></i> 2018</span
>
<a href="#" class="list-meta-item"
><i class="fas fa-star"></i> 6.2</a
>
</span>
<p>
Max and Annie's weekly game night gets kicked up a notch when
Max's brother Brooks arranges a murder mystery party -- complete
with fake thugs and federal agents. So when Brooks gets
kidnapped, it's all supposed to be part of the game.
</p>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- /movie cards -->
<br />
<!-- Newsletter -->
<!-- /Newsletter -->
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-lg-6 h-100 text-center text-lg-left my-auto">
<ul class="list-inline mb-2">
<li class="list-inline-item">
About us
</li>
<li class="list-inline-item">⋅</li>
<li class="list-inline-item">
Refunds
</li>
<li class="list-inline-item">⋅</li>
<li class="list-inline-item">
Terms and Privacy
</li>
<li class="list-inline-item">⋅</li>
<li class="list-inline-item">
Contact
</li>
</ul>
<p class="small mb-4 mb-lg-0">
Omar Ahmad© 2018. All Rights Reserved.
</p>
</div>
<div class="col-lg-6 h-100 text-center text-lg-right my-auto">
<ul class="list-inline mb-0">
<li class="list-inline-item mr-3">
<a href="https://linkedin.com/in/byalk" class="footer-fb">
<i class="fab fa-linkedin fa-2x fa-fw"></i>
</a>
</li>
<li class="list-inline-item mr-3">
<a href="#" class="footer-tw">
<i class="fab fa-twitter fa-2x fa-fw"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#" class="footer-in">
<i class="fab fa-instagram fa-2x fa-fw"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<!-- /Footer -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
crossorigin="anonymous"
></script>
<script src="script.js"></script>
</body>
</html>
You have two variables named 'main', one is the getElementById and the other is from the forEach loop. Change one and it should work
const BASE_URL = "https://api.themoviedb.org/3";
const API_URL = BASE_URL + "/discover/movie?sort_by=popularity.desc&" + API_KEY;
const IMG_URL = "https://image.tmdb.org/t/p/w500";
const mainEl = document.getElementById("main");
getMovies(API_URL);
function getMovies(url) {
fetch(url)
.then((res) => res.json())
.then((data) => {
console.log(data.results);
showMovies(data.results);
});
}
function showMovies(data) {
main.innerHTML = " ";
data.forEach((main) => {
const { title, vote_average, overview, poster_path } = main;
const movieEl = document.createElement("div");
movieEl.classList.add("movie");
movieEl.innerHTML = `
<img
src="${IMG_URL + poster_path} alt-""${title}"
/>
</a>
</div>
<div class="list-content">
<h2>
<a href="single-movie.html" class="text-black"
></a
>
</h2>
<span class="list-meta">
<span class="list-meta-item"
><i class="fas fa-clock"></i> 2018</span
>
<a href="#" class="list-meta-item"
><i class="fas fa-star"></i> ${vote_average}</a
>
</span>
<p>
${overview}
</p>
</div>
`;
mainEl.appendChild(movieEl);
});
}
Sandbox Code
In the forEach loop you are declaring each array item as ‘main’.
Therefore main.appendChild() is called upon the array item, not on the HTML element.
Change the item name in the forEach loop to something like ‘movie’, and then ofcourse also in the first line of the loop.
I'm trying to use material.io tabs in a project, anyway the html structure is not well documented:
https://material.io/components/tabs/web#design-api-documentation
<div class="mdc-tab-bar" role="tablist">
<div class="mdc-tab-scroller">
<div class="mdc-tab-scroller__scroll-area">
<div class="mdc-tab-scroller__scroll-content">
<button class="mdc-tab mdc-tab--active" role="tab" aria-selected="true" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__icon material-icons" aria-hidden="true">favorite</span>
<span class="mdc-tab__text-label">Favorites</span>
</span>
<span class="mdc-tab-indicator mdc-tab-indicator--active">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
</div>
</div>
</div>
</div>
where am i supposed to put the tab body content? It seems they shows only how to build a tab bar but not the whole functionality?
first, you should make the tab bars in a div then content in another div additionally use javascript to specify when content should change. I hope this answer helped. I think my answer must not be very clear but when you go through the code you will find what I mean
<div class="svelte4" style="flex:1;" id="tim">
<div class="mdc-tab-bar" role="tablist" style="background-color:rgb(34, 34, 34);">
<div class="mdc-tab-scroller">
<div class="mdc-tab-scroller__scroll-area">
<div class="mdc-tab-scroller__scroll-content">
<button class="mdc-tab mdc-tab--active" role="tab" aria-selected="true" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__text-label">1</span>
</span>
<span class="mdc-tab-indicator mdc-tab-indicator--active">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
<button class="mdc-tab mdc-tab" role="tab" aria-selected="true" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__text-label">2</span>
</span>
<span class="mdc-tab-indicator mdc-tab-indicator">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
<button class="mdc-tab mdc-tab" role="tab" aria-selected="true" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__text-label">3</span>
</span>
<span class="mdc-tab-indicator mdc-tab-indicator">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
</div>
</div>
</div>
</div>
<div class="content content--active">
<p>1</p>
</div>
<div class="content">
<p>2</p>
</div>
<div class="content">
<p>3</p>
</div>
</div>
var tabBar = new mdc.tabBar.MDCTabBar(document.querySelector('.mdc-tab-bar'));
var contentEls = document.querySelectorAll('.content');
tabBar.listen('MDCTabBar:activated', function (event) {
// Hide currently-active content
document.querySelector('.content--active').classList.remove('content--active');
// Show content for newly-activated tab
contentEls[event.detail.index].classList.add('content--active');
});
I have a nav tab class with two tabs with material and I want to show the second tab.
I have tried with jQuery but that is not working for me.
Here my HTML :
<div class="mdc-tab-bar" role="tablist">
<div class="mdc-tab-scroller">
<div class="mdc-tab-scroller__scroll-area">
<div class="mdc-tab-scroller__scroll-content nav nav-tabs" id="exTabs">
<button class="nav-item nav-link mdc-tab mdc-tab--active" id="nav_tns_tab" data-toggle="tab" href="#nav_tns" role="tab" aria-selected="true" tabindex="0" style="border:0px">
<span class="mdc-tab__content">
<span class="mdc-tab__text-label text-uppercase tab-mdc-title details-text-style" style="font-size: 14px">TNS</span>
</span>
<span class="mdc-tab-indicator mdc-tab-indicator--active">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
<button class="nav-item nav-link mdc-tab" id="nav_act_tab" data-toggle="tab" href="#nav_act" role="tab" aria-selected="false" tabindex="0" style="border:0px">
<span class="mdc-tab__content">
<span class="mdc-tab__text-label text-uppercase tab-mdc-title details-text-style" style="font-size: 14px">Activite</span>
</span>
<span class="mdc-tab-indicator">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
</div>
</div>
</div>
</div>
<div class="tab-content mt-4" style="display: block;position: relative;width: 100%;margin-bottom: 56px;">
<div class="tab-pane active mt-3" id="nav_tns">
<div class="mdc-card demo-card">
</div>
<div class="mdc-card demo-card mt-3">
</div>
</div>
<div class="tab-pane fade mt-3" style="" id="nav_act">
<div class="mdc-card demo-card">
</div>
</div>
</div>
Here my code Jquery :
activaTab('nav_act');
function activaTab(tab) {
$('.nav-tabs [href="#' + tab + '"]').tab('show');
};
So how can I solve this problem with jquery or by adding specific class like show active in bootstrap.
Make sure to add the proper libraries. As you can see in this example, the default tab is the second.
activaTab('nav_act');
function activaTab(tab) {
$('.nav-tabs [href="#' + tab + '"]').tab('show');
};
.show {
background-color: red!important;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/4.0.2/bootstrap-material-design.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.js"></script>
<div class="mdc-tab-bar" role="tablist">
<div class="mdc-tab-scroller">
<div class="mdc-tab-scroller__scroll-area">
<div class="mdc-tab-scroller__scroll-content nav nav-tabs" id="exTabs">
<button class="nav-item nav-link mdc-tab mdc-tab--active" id="nav_tns_tab" data-toggle="tab" href="#nav_tns" role="tab" aria-selected="true" tabindex="0" style="border:0px">
<span class="mdc-tab__content">
<span class="mdc-tab__text-label text-uppercase tab-mdc-title details-text-style" style="font-size: 14px">TNS</span>
</span>
<span class="mdc-tab-indicator mdc-tab-indicator--active">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
<button class="nav-item nav-link mdc-tab" id="nav_act_tab" data-toggle="tab" href="#nav_act" role="tab" aria-selected="false" tabindex="0" style="border:0px">
<span class="mdc-tab__content">
<span class="mdc-tab__text-label text-uppercase tab-mdc-title details-text-style" style="font-size: 14px">Activite</span>
</span>
<span class="mdc-tab-indicator">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
</div>
</div>
</div>
</div>
<div class="tab-content mt-4" style="display: block;position: relative;width: 100%;margin-bottom: 56px;">
<div class="tab-pane active mt-3" id="nav_tns">
<div class="mdc-card demo-card">
</div>
<div class="mdc-card demo-card mt-3">
</div>
</div>
<div class="tab-pane fade mt-3" style="" id="nav_act">
<div class="mdc-card demo-card">
</div>
</div>
</div>
I need to make a jQuery code that every time I click on <li> this span
<span id="add_icon" class="fa fa-check"></span> shows and this span hides
<span id="add_skill" class="fa fa-plus-circle"></span>
this is my code:
<ul id="skill-job-list" class="available-skill-list">
<li>
<div id="job_item" data-job="149" title="Business Plans" class="skill-select-bubble ">
Business Plans (809 jobs)
<span id="add_skill" class="fa fa-plus-circle"></span>
<span id="add_icon" class="fa fa-check"></span>
</div>
</li>
<li>
<div id="job_item" data-job="149" title="Business Plans" class="skill-select-bubble ">
Business Plans (809 jobs)
<span id="add_skill" class="fa fa-plus-circle"></span>
<span id="add_icon" class="fa fa-check"></span>
</div>
</li>
<li>
<div id="job_item" data-job="149" title="Business Plans" class="skill-select-bubble ">
Business Plans (809 jobs)
<span id="add_skill" class="fa fa-plus-circle"></span>
<span id="add_icon" class="fa fa-check"></span>
</div>
</li>
</ul>
$(".job_item").on("click", function() {
$(this).find("span").toggleClass("fa-plus-circle fa-check");
});
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="skill-job-list" class="available-skill-list">
<li>
<div data-job="149" title="Business Plans" class="skill-select-bubble job_item">
Business Plans (809 jobs)
<span class="fa fa-plus-circle add_skill"></span>
</div>
</li>
<li>
<div data-job="149" title="Business Plans" class="skill-select-bubble job_item">
Business Plans (809 jobs)
<span class="fa fa-plus-circle add_skill"></span>
</div>
</li>
<li>
<div data-job="149" title="Business Plans" class="skill-select-bubble job_item">
Business Plans (809 jobs)
<span class="fa fa-plus-circle add_skill"></span>
</div>
</li>
</ul>
First, you can't have the same id for each block, so your id "job_item" should become a class ".job_item", same for "add_skill" and "add_icon" so you can do this :
$(".job_item").on("click", function() {
$(this).find(".add_skill").hide();
$(this).find(".add_icon").show();
});
Now if you need to change witch one is hide() and show() for every click, maybe you can try this :
<span id="add_skill" class="fa fa-plus-circle"></span> // keep one and delete the other span
$(".job_item").on("click", function() {
$(this).find("span").toggleClass("fa fa-plus-circle fa-check");
});
Is this what you are looking for?
You can't set same id for multiple html elements.. so set class name for each of them.
<span id="add_skill" class="fa fa-plus-circle add_skill_class"></span>
<span id="add_icon" class="fa fa-check add_icon_class"></span>
$('#skill-job-list').on('click', function(){
$(this).find('.add_skill_class').hide();
$(this).find('.add_icon_class').show();
});
Try below code
$('li').on('click', function() {
$(this).find('.fa-plus-circle').show();
$(this).find('.fa-check').hide();
});
span.fa-plus-circle {display:none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<ul id="skill-job-list" class="available-skill-list">
<li>
<div id="job_item" data-job="149" title="Business Plans" class="skill-select-bubble ">
Business Plans (809 jobs)
<span id="add_skill" class="fa fa-plus-circle"></span>
<span id="add_icon" class="fa fa-check"></span>
</div>
</li>
<li>
<div id="job_item" data-job="149" title="Business Plans" class="skill-select-bubble ">
Business Plans (809 jobs)
<span id="add_skill" class="fa fa-plus-circle"></span>
<span id="add_icon" class="fa fa-check"></span>
</div>
</li>
<li>
<div id="job_item" data-job="149" title="Business Plans" class="skill-select-bubble ">
Business Plans (809 jobs)
<span id="add_skill" class="fa fa-plus-circle"></span>
<span id="add_icon" class="fa fa-check"></span>
</div>
</li>
</ul>
$(document).ready(function(){
$(".fa-plus-circle").hide();
$(".fa-check").hide();
$('li').on("click",function(){
var index = $(this).index();
$(".fa-plus-circle:eq("+index+")").toggle();
$(".fa-check:eq("+index+")").toggle();
});
});
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<ul>
<li>
<div id="job_item" data-job="149" title="Business Plans" class="skill-select-bubble ">
Business Plans (809 jobs)
<span id="add_skill" class="fa fa-plus-circle">add_skill 1</span>
<span id="add_icon" class="fa fa-check">add_icon 1</span>
</div>
</li>
<li>
<div id="job_item" data-job="149" title="Business Plans" class="skill-select-bubble ">
Business Plans (809 jobs)
<span id="add_skill" class="fa fa-plus-circle">add_skill 2</span>
<span id="add_icon" class="fa fa-check">add_icon 2</span>
</div>
</li>
<li>
<div id="job_item" data-job="149" title="Business Plans" class="skill-select-bubble ">
Business Plans (809 jobs)
<span id="add_skill" class="fa fa-plus-circle"> add_skill 3</span>
<span id="add_icon" class="fa fa-check"> add_icon 3</span>
</div>
</li>
</ul>
I have a button and I want to put normal is the default value of this button. I have change ng-swich-default to normal but it not catch data from normal in the drop down. It shows only letter. How can I do it with AngularJS? I have never used it as before. Below code:
<span class="priority-select btn-group" dropdown>
<button
type="button"
class="btn btn-default dropdown-toggle"
dropdown-toggle>
<img
ng-if="form.priority === undefined"
src="images/task_approval/priority/priority-create.png"
alt="priority"/>
<img
ng-if="form.priority !== undefined"
ng-src="images/task_approval/priority/{{form.priority}}.png"
alt="priority"/>
<span ng-switch="form.priority">
<span
ng-switch-when="high"
class="btn-text"
translate>High
</span>
<span
ng-switch-when="normal"
class="btn-text"
translate>Normal
</span>
<span
ng-switch-when="low"
class="btn-text"
translate>Low
</span>
<span
ng-switch-default
class="btn-text"
translate>Priority
</span>
</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a ng-click="set_priority('high')">
<img src="images/task_approval/priority/high.png" alt="high"/>
<span translate>High</span>
</a>
</li>
<li>
<a ng-click="set_priority('normal')">
<img src="images/task_approval/priority/normal.png" alt="normal"/>
<span translate>Normal</span>
</a>
</li>
<li>
<a ng-click="set_priority('low')">
<img src="images/task_approval/priority/low.png" alt="low"/>
<span translate>Low</span>
</a>
</li>
</ul>
</span>
You must declare set_priority() function and change form.priority value with your parameter.
or
you can change inside ng-click in "a" tag.
Something like this:
ng-click="formPriority='high'"
and then
ng-switch="formPriority"
<span class="priority-select btn-group" dropdown>
<button ng-init='formPriority="normal"'
type="button"
class="btn btn-default dropdown-toggle"
dropdown-toggle>
<img
ng-if="formPriority == undefined"
src="images/task_approval/priority/priority-create.png"
alt="priority"/>
<img
ng-if="formPriority != undefined"
ng-src="images/task_approval/priority/{{formPriority}}.png"
alt="priority"/>
<span ng-switch="formPriority">
<span
ng-switch-when="high"
class="btn-text"
translate>High
</span>
<span
ng-switch-when="normal"
class="btn-text"
translate>Normal
</span>
<span
ng-switch-when="low"
class="btn-text"
translate>Low
</span>
<span
ng-switch-default
class="btn-text"
translate>Priority
</span>
</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a ng-click='formPriority="high"'>
<img src="images/task_approval/priority/high.png" alt="high"/>
<span translate>High</span>
</a>
</li>
<li>
<a ng-click='formPriority="normal"'>
<img src="images/task_approval/priority/normal.png" alt="normal"/>
<span translate>Normal</span>
</a>
</li>
<li>
<a ng-click='formPriority="low"'>
<img src="images/task_approval/priority/low.png" alt="low"/>
<span translate>Low</span>
</a>
</li>
</ul>
</span>