![]() When the button is clicked, utilize the forEach method on it to fire a clickeventListener or a function. Then pick all the components with the tab-btn class with a querySelectorAll. To begin the coding, create a method called setupTabs. After that, display none the contents of all the tabs.Ī display block style is applied to the tab-content-active class so as to display the content in the default tab, which is the first tab. The position absolute applied in the tab-content class will stack the content the all the tabs. The following styles will be applied to the content, tab-content and tab-content classes: When the button is clicked, it will apply the following styles to the button element: Thereafter apply the following styles to the sidebar and tab buttons:Īfterwards, specify what will happen to the button once it gets clicked that will be the tab-btn-active class. Apply the following styles to the tab wrapper: Make sure the data-for-tab and data-tab numbers match if you're not using any server-side code. If you're loading the page from the server, you might want to utilize loops or export the data so that the data-tab values for tabs 1, 2, and 3 matches the data-for-tab values. Do the same for tab two and three, but remove the tab-content-active class and name their data-tab attribute 2 and three respectively. You may now go ahead and fill the div with some content. We'll map the data-for-tab attribute within this div, so add a data-tab='1' property to it and give it a tab number of 1 to represent the first tab. The active class will be used in CSS and JavaScript to indicate what happens to the tab when the tab button is clicked. Also, give the tab content div a class called tab-content-active. Create a new div and give it the tab-content class. In the JavaSript, the tab number is used to read the properties and select which tab to open.Ĭreate a parent div underneath the sidebar and give it the class content to act as a wrapper for the tab contents. Add a tab number to the data element to specify which button corresponds to which tab. Add a data for-tab=' ' attribute to each of these buttons now. Add HTML, CSS, and JavaScript as the names of the buttons, respectively. The active class will come in handy when specifying in the CSS and JavaScript what happens to the tab when the tab button is clicked. To the first button, add a tab-btn-active class. Create three buttons in the sidebar, then give each one the tab-btn class. Create a new div inside the wrapper, give it a class, and title it sidebar this will contain the tab buttons. ![]() Create a div, give it a class, and call it tabs this will be the wrapper for the tab panel. Intermediate level knowledge in HTML, CSS & JavaScript.Įssentially the HTML has a few levels of elements:īegin by constructing the tab panel wrapper.Let's begin!īefore getting into the coding part of this project, ensure you have the following: That's right, no fancy JavaScript framework is needed, just the simple Vanilla JavaScript we all know. Then render the elements on the screen using CSS and finally, add the functionality using some bit of Vanilla JavaScript. We will define the structure of the web application using HTML. ![]() The web application can do the following: In this tutorial, we shall create a simple web application with a horizontal switchable tabs panel. Check out the How to display your custom map on the web page tutorial to learn how to get your map ID.Tabs are ideal for singular page web apps or websites with multiple subjects to display. You can also use your custom maps in the styleSwitcherControl. View complete source code on GitHub Learn more Add the SwitcherControl style to your stylesheet. This code is an adaptation of the maplibre-gl-basemaps plugins.Ĭreate the styleSwitcherControl css style. Select the initial style from the list and update the map style URL.Ĭreate the styleSwitcherControl and add it to the map. In the list of styles use as key the ID of the map in MapTiler Cloud. Include the following code in your JavaScript file (Example: app.js).Ĭreate the list of styles. If you have a bundler that can handle CSS, you can import the CSS or include it with a in the head of the document via the CDN You can start the map in a different place by modifying the starting position and starting zoom, and you can change the look of the map to any of our styles, or yours, by updating the style. Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key. Copy the following code, paste it into your favorite text editor, and save it as a.
0 Comments
Leave a Reply. |