Fix issue 29110: Use a less confusing class name

wbamberg · Sep 14, 2023 · 8c1af59 · 8c1af59
1 parent fe36fe6
commit 8c1af59
Showing 1 changed file with 5 additions and 5 deletions.
diff --git a/files/en-us/learn/css/css_layout/practical_positioning_examples/index.md b/files/en-us/learn/css/css_layout/practical_positioning_examples/index.md
@@ -44,7 +44,7 @@ To start with, we'd like you to make a local copy of the starting HTML file —
 ```html
 <section class="info-box">
   <ul>
-    <li><a href="#" class="active">Tab 1</a></li>
+    <li><a href="#" class="active-tab">Tab 1</a></li>
     <li><a href="#">Tab 2</a></li>
     <li><a href="#">Tab 3</a></li>
   </ul>
@@ -160,7 +160,7 @@ Add the following CSS:
 }
 ```
 
-Finally for this section we'll set some styles on the link states. First, we'll set the `:focus` and `:hover` states of the tabs to look different when they are focused/hovered, providing users with some visual feedback. Secondly, we'll set a rule that puts the same styling on one of the tabs when a `class` of `active` is present on it. We will set this using JavaScript when a tab is clicked on. Place the following CSS below your other styles:
+Finally for this section we'll set some styles on the link states. First, we'll set the `:focus` and `:hover` states of the tabs to look different when they are focused/hovered, providing users with some visual feedback. Secondly, we'll set a rule that puts the same styling on one of the tabs when a `class` of `active-tab` is present on it. We will set this using JavaScript when a tab is clicked on. Place the following CSS below your other styles:
 
 ```css
 .info-box li a:focus,
@@ -169,7 +169,7 @@ Finally for this section we'll set some styles on the link states. First, we'll
   color: white;
 }
 
-.info-box li a.active {
+.info-box li a.active-tab {
   background-color: #a60000;
   color: white;
 }
@@ -227,7 +227,7 @@ function setTabHandler(tab, tabPos) {
       tab.className = "";
     }
 
-    tab.className = "active";
+    tab.className = "active-tab";
 
     for (const panel of panels) {
       panel.className = "";
@@ -245,7 +245,7 @@ This code does the following:
 - In the `setTabHandler()` function, the tab has an `onclick` event handler set on it, so that when the tab is clicked, the following occurs:
 
   - A `for` loop is used to cycle through all the tabs and remove any classes that are present on them.
-  - A `class` of `active` is set on the tab that was clicked on — remember from earlier that this class has an associated rule in the CSS that sets the same {{cssxref("color")}} and {{cssxref("background-color")}} on the tab as the panels are styled with.
+  - A `class` of `active-tab` is set on the tab that was clicked on — remember from earlier that this class has an associated rule in the CSS that sets the same {{cssxref("color")}} and {{cssxref("background-color")}} on the tab as the panels are styled with.
   - A `for` loop is used to cycle through all the panels and remove any classes that are present on them.
   - A class of `active-panel` is set on the panel that corresponds to the tab that was clicked on — remember from earlier that this class has an associated rule in the CSS that sets its {{cssxref("z-index")}} to 1, making it appear over the top of the other panels.