A tabbed interface allows users to efficiently navigate between different sections or content pages by clicking on designated tab buttons. This section demonstrates how to implement a tabbed interface using CSS classes provided by W3E.css.

- Required CSS: `w3e-tabs`  (beside button and tab IDs).
- JavaScript methods: automatically assigned.

**Structure:**

- The main container of a tabbed interface is any element with the class name `w3e-tabs`.
- Each tabbed interface consists of a single bar containing clickable buttons (tabs) and their corresponding content sections.

**JavaScript Behavior:**

- A JavaScript function automatically scans the entire HTML document for elements with the `w3e-tabs` class.
- For each tabbed interface found, the script iterates through its child elements.
 If a child element has both a button ID and a corresponding tab ID (ending with `-tab`), it's considered part of the tabbed interface. Otherwise, it's ignored.
- A click event listener is attached to each button element. When clicked, the corresponding tab with the matching ID (ending with `-tab`) is displayed, and the button itself is visually highlighted using the `w3-theme-dark` class. The previously active button's highlight is removed.

**Example:**

If a button has an ID of `London` the corresponding tab's ID would be `London-tab`. Clicking the `London` button would display the `London-tab` content and visually distinguish the `London` button as active.

HTML Example