prueba

.gitignore

+/src/nbproject/private/

practica2/nbproject/project.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project xmlns="http://www.netbeans.org/ns/project/1">
+    <type>org.netbeans.modules.web.clientproject</type>
+    <configuration>
+        <data xmlns="http://www.netbeans.org/ns/clientside-project/1">
+            <name>practica2</name>
+        </data>
+    </configuration>
+</project>

src/public_html/index.html

@@ -4,20 +4,20 @@
         <link rel="shortcut icon" href="./images/icon.ico">
         <title>AgroUja Jaén - Productos</title> 
         <script src="javascript.js"></script>
-        <link rel="stylesheet" href="css/estilo.css" />
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
         <meta charset="UTF-8">
     </head>
 
     <header>
         <div id="header">
             <div id="headerRight" >
-                <nav> 
-                    <ul>
-                        <li><input type="button" onClick="ocultar()" value="ON"></li>
-                        <li><input type="button" onClick="mostrar()" value="OFF"></li>
-                        <li><A href="index.html"> Home</A></li>
-                        <li><A href="index.html"> Productos</A></li>
-                        <li><A href="index.html"> Contacto</A>  </li>                         
+                <nav class="navbar navbar-expand-lg navbar-light bg-light"> 
+                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                        <li class="nav-item"><input class="btn btn-secondary" type="button" onClick="ocultar()" value="ON"></li><br>
+                        <li class="nav-item"><input class="btn btn-secondary" type="button" onClick="mostrar()" value="OFF"></li>
+                        <li class="nav-item"><A class="nav-link active" aria-current="page" href="#"> Home</A></li>
+                        <li class="nav-item"><A class="nav-link active" aria-current="page" href="#"> Productos</A></li>
+                        <li class="nav-item"><A class="nav-link active" aria-current="page" href="#"> Contacto</A>  </li>                         
                     </ul> 
                 </nav>
             </div>  

src/public_html/javascript.js

+
+function mostrar() {
+    document.getElementById("sidebar").style.display = "none";
+    document.getElementById("main").style.display = "inline";
+
+}
+
+function ocultar(id) {
+    document.getElementById("sidebar").style.display = "block";
+    document.getElementById("main").style.display = "block";
+}
+
+function filtros() {
+    var cat1 = document.getElementById("todo");
+    var cat2 = document.getElementById("aceite");
+    var cat3 = document.getElementById("herramienta");
+    var checks = document.getElementsByClassName("aceitecont");
+    var checkss = document.getElementsByClassName("herramientacont");
+
+    if (cat1.checked) {
+        for (var i = 0; i < checks.length; i++) {
+            checks[i].style.display = "block";
+        }
+        for (var i = 0; i < checkss.length; i++) {
+            checkss[i].style.display = "block";
+        }
+    }
+
+    if (cat2.checked) {
+        for (var i = 0; i < checkss.length; i++) {
+            checkss[i].style.display = "none";
+        }
+        for (var i = 0; i < checks.length; i++) {
+            checks[i].style.display = "block";
+        }
+    }
+    if (cat3.checked) {
+        for (var i = 0; i < checkss.length; i++) {
+            checkss[i].style.display = "block";
+        }
+        for (var i = 0; i < checks.length; i++) {
+            checks[i].style.display = "none";
+        }
+    }
+
+}
+
+