Change bootstrap navbar menu item color only if there is a valid link, using ASP Menu

Question

Am unable to change the color of the menu item that do not have valid links in the sitemap datasource. I have this css which works fine but it set the color when hover for any item in the navbar.

     .navbar-nav > li > a:hover, .navbar-nav > li > a:focus
     {
         font-weight:bold;
         background-color: lightgray;                
         color: blue;
         border-bottom: 2px solid black;  
     } 

i want a javascript that check if there is a valid link behind the item before changing the color.

Answer 1

Hi @Souleymane Ben Daouda Dieye

My design is to judge whether a link is valid based on the Fetch API. The Fetch API is a JavaScript API that lets us send a web request and process it after receiving the response. It can be used to request data from a server, upload data, or send other types of requests.

And the CSS method you give is not flexible to judge. So I use EventListener and the mouseOver, mouseOut events to implement your previous CSS functionality.

Valid URLs are red, invalid URLs are yellow.

The Fetch API will cause Cors issues, so add mode: 'no-cors' to your code.

 <form id="form1" runat="server">
     <div>
         <ul class="navbar-nav">
             <li>
         <a id="demo" href="https://localhost:44371/Defa2ult.aspx">link</a>
                 </li>
             </ul>
         <script>
             function isValidURL(url) {
                 
                 return fetch(url, { mode: 'no-cors' })
                     .then(function (response) {
                        
                         if (response.ok || response.status >= 200 && response.status < 300) {
                             alert("success");
                             document.getElementById("demo").addEventListener("mouseover", mouseOver);
                             document.getElementById("demo").addEventListener("mouseout", mouseOut);

                             function mouseOver() {
                                 document.getElementById("demo").style.color = "red";
                             }

                             function mouseOut() {
                                 document.getElementById("demo").style.color = "black";
                             }
                             return true;
                         } else {
                             
                             alert("fail");
                             document.getElementById("demo").addEventListener("mouseover", mouseOver);
                             document.getElementById("demo").addEventListener("mouseout", mouseOut);

                             function mouseOver() {
                                 document.getElementById("demo").style.color = "yellow";
                             }

                             function mouseOut() {
                                 document.getElementById("demo").style.color = "black";
                             }
                             return false;
                         }
                     })
                     .catch(function (error) {
                        
                         return false;
                     });
             }
         </script>
         <script >
             isValidURL(document.getElementById("demo"));
         </script>
         
         
     </div>
 </form>

Best regards,
Qi You

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

Dear Qi You

I have not been able to implement your javascript solution with succes, it's does not seem to be working with the mix of tools am using (JQuery + Bootstarp). I want a jQuery solution with an hover function that targets the navbar. By the way i am using bootstrap version 3.0.3 and jQuery 1.12.4 for th js file and 1.13.0 for the css one

Thanks in advance

Very best