https://github.com/lana-20/mobile-tab-navigation
https://github.com/lana-20/mobile-tab-navigation
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/lana-20/mobile-tab-navigation
- Owner: lana-20
- Created: 2021-08-13T17:05:37.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2022-11-27T22:47:08.000Z (almost 3 years ago)
- Last Synced: 2025-05-29T21:36:11.058Z (4 months ago)
- Language: HTML
- Size: 3.91 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
| [Mobile Tab Navigation](https://github.com/lana-20/50Projects50Days/tree/main/MobileTabNavigation) | [Live Demo](https://lana-20.github.io/mobile-tab-navigation/) |
|----|----|
In this project, I am creating a mobile UI, with an image for the content and menu tabs on the bottom.
I have Home, Work, Blog, and About Us tabs. It shows a different image depending on which tab you click.
I have a specific class of *show* on the content, and a specific class of *active* on the tabs.
The active tab is highlighted in purple. I loop through the list items in the menu and add an event listener
onto each one, so that I can add and remove certain classes onto the content as well as onto the items themselves.