Question 304449 in CSS Question posted in
Some basic documentation can be found here.

Javascript- struggling, especially with changing css classes attributes

Thanks to sites such as this, I have learned HTML, CSS, PHP and SQL to a fairly good standard. However, I am really struggling with Javascript.

In my specific case I have concluded that for my menu I would be better using tabs rather than dropdowns- I know that’s an ongoing debate, but for me, I have found this to be the best solution.

I learned about tabs from W3Schools and used their example to try and make every tab close when they lost focus, but I cannot find any way of doing so. For reference, I attach the bare bones example from W3Schools below (permitted as per their T&C). Be assured that I am not being lazy and I already understand how to convert this to PC/smartphone responsive (including hamburger menu) and will be populating the menu by database driven PHP/SQL- but it’s just "as is" here to avoid confusion.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial;}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

/* Style the close button */
.topright {
  float: right;
  cursor: pointer;
  font-size: 28px;
}

.topright:hover {color: red;}
</style>
</head>
<body>

<h2>Tabs</h2>
<p>Click on the x button in the top right corner to close the current tab:</p>

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
  <span onclick="this.parentElement.style.display='none'" class="topright">&times</span>
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <span onclick="this.parentElement.style.display='none'" class="topright">&times</span>
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <span onclick="this.parentElement.style.display='none'" class="topright">&times</span>
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

<script>
function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
   
</body>
</html>

I have tried this

<div id="London" class="tabcontent" onblur="style.display.visibility='none'">Lorem Ipsum....</div>

for each and many similar examples, but nothing seems to work.

I have also tried several ‘listening’ for onclick etc as described, but I can’t get any to work.

I can find 100s of people asking this or a similar question, but I just don’t understand what I need to copy or change for my example. What would really be helpful is not only the few lines of code that I know I am missing but someone adding "this bit here does this, that bit there does that…>" as that would help me understand.

Many thanks in advance. Apologies if I haven’t asked this question well- despite learning everything else in this last year, this is my first time asking on a forum.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Thank you to both La Ngoc Hai (sorry I can't write the special characters of your name properly) and to Moon.

    Not only have you shown me HOW to do it, but you have also explained WHY and that is so important, thank you. I have read several JS books and online guides and the inability to use blur for classes has never been mentioned before.

    I am sorry that I cannot vote your answers to credit you, but as a new user it doesn't let me, so I thank you here with words instead.


  2. 0

    div element does not receive focus by default, so you can’t use onblur. Check out the solution here

    Login or Signup to reply.
  3. 0

    Did you know div cant be focus or blur like input normally, but you can add a prop tabindex then it can be focused, so I add some code below,when the tab change the active content will be focused ,and when the content blur it will be hidden

    <!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            font-family: Arial;
        }

        /* Style the tab */
        .tab {
            overflow: hidden;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }

        /* Style the buttons inside the tab */
        .tab button {
            background-color: inherit;
            float: left;
            border: none;
            outline: none;
            cursor: pointer;
            padding: 14px 16px;
            transition: 0.3s;
            font-size: 17px;
        }

        /* Change background color of buttons on hover */
        .tab button:hover {
            background-color: #ddd;
        }

        /* Create an active/current tablink class */
        .tab button.active {
            background-color: #ccc;
        }

        /* Style the tab content */
        .tabcontent {
            display: none;
            padding: 6px 12px;
            border: 1px solid #ccc;
            border-top: none;
            outline: 0;
        }

        /* Style the close button */
        .topright {
            float: right;
            cursor: pointer;
            font-size: 28px;
        }

        .topright:hover {
            color: red;
        }
    </style>
</head>

<body>

    <h2>Tabs</h2>
    <p>Click on the x button in the top right corner to close the current tab:</p>

    <div class="tab">
        <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
        <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
        <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
    </div>

    <div id="London" class="tabcontent" tabindex="0" onblur="event.target.style.display='none'">
        <span onclick="this.parentElement.style.display='none'" class="topright">&times</span>
        <h3>London</h3>
        <p>London is the capital city of England.</p>
    </div>

    <div id="Paris" class="tabcontent" tabindex="1" onblur="event.target.style.display='none'">
        <span onclick="this.parentElement.style.display='none'" class="topright">&times</span>
        <h3>Paris</h3>
        <p>Paris is the capital of France.</p>
    </div>

    <div id="Tokyo" class="tabcontent" tabindex="2" onblur="event.target.style.display='none'">
        <span onclick="this.parentElement.style.display='none'" class="topright">&times</span>
        <h3>Tokyo</h3>
        <p>Tokyo is the capital of Japan.</p>
    </div>

    <script>
        function openCity(evt, cityName) {
            var i, tabcontent, tablinks;
            tabcontent = document.getElementsByClassName("tabcontent");
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
            }
            tablinks = document.getElementsByClassName("tablinks");
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(" active", "");
            }
            document.getElementById(cityName).style.display = "block";
            document.getElementById(cityName).focus()  // add focus when tab change
            evt.currentTarget.className += " active";
        }

        // Get the element with id="defaultOpen" and click on it
        document.getElementById("defaultOpen").click();
    </script>

</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search