Skip to content

Instantly share code, notes, and snippets.

@JRGGRoberto

JRGGRoberto/lista.html

Created April 9, 2024 17:57
Show Gist options
  • Save JRGGRoberto/4255b81f707e74ee61689d81be4d51b7 to your computer and use it in GitHub Desktop.
Save JRGGRoberto/4255b81f707e74ee61689d81be4d51b7 to your computer and use it in GitHub Desktop.
Download ZIP
Lista com numeração dinâmica
Raw
lista.html
<!DOCTYPE html>
<html>
<body>
<h1>Título</h1>
<ol id="menu">
<li><a href="#cafe">Café</a></li>
<li><a href="#verde">Limão</a></li>
<li><a href="#laran">Orange</a></li>
<li><a href="#ma">Carne</a></li>
</ol>
<hr>
<script>
document.addEventListener("DOMContentLoaded", function() {
var menuItems = document.querySelectorAll("#menu li a");
menuItems.forEach(function(item, index) {
var targetId = item.getAttribute("href").substring(1); // Remove "#" from href
var targetElement = document.getElementById(targetId);
var num = index + 1; // Get the order number
// Replace the content of the corresponding <h2> with the order number and item text
targetElement.innerHTML = num + ". " + item.textContent;
item.addEventListener("click", function(event) {
event.preventDefault(); // Prevent default link behavior
targetElement.scrollIntoView({ behavior: "smooth" });
});
item.addEventListener("mouseover", function() {
targetElement.style.backgroundColor = "lightgray"; // Change background color on hover
});
item.addEventListener("mouseout", function() {
targetElement.style.backgroundColor = ""; // Reset background color when mouse leaves
});
item.addEventListener("click", function() {
targetElement.classList.add("active"); // Add class to the clicked title
// Remove "active" class from other titles
document.querySelectorAll("h2").forEach(function(title) {
if (title !== targetElement) {
title.classList.remove("active");
}
});
});
});
});
</script>
<h2 id="cafe"></h2>
<p>Baçfdljadsçlfkajsdfçlajk dasdçl kjasdçf laksjdçaoidjfaçsldkn a.sdlfaBaçfdljadsçlfkajsdfçlajk dasdçl kjasdçf laksjdçaoidjfaçsldkn a.sdlfaBaçfdljadsçlfkajsdfçlajk dasdçl kjasdçf laksjdçaoidjfaçsldkn a.sdlfaBaçfdljadsçlfkajsdfçlajk dasdçl kjasdçf laksjdçaoidjfaçsldkn a.sdlfaBaçfdljadsçlfkajsdfçlajk dasdçl kjasdçf laksjdçaoidjfaçsldkn a.sdlfaBaçfdljadsçlfkajsdfçlajk dasdçl kjasdçf laksjdçaoidjfaçsldkn a.sdlfa</p>
<a href="#menu">voltar</a>
<h2 id="verde"></h2>
<p>1 23233453453b 3453453 4345 31 23233453453b 3453453 4345 31 23233453453b 3453453 4345 31 23233453453b 3453453 4345 31 23233453453b 3453453 4345 31 23233453453b 3453453 4345 31 23233453453b 3453453 4345 31 23233453453b 3453453 4345 31 23233453453b 3453453 4345 31...</p>
<a href="#menu">voltar</a>
<h2 id="laran"></h2>
<p>AZZZZZZZZXVAERGE CAV DFGG34DV AZZZZZZZXVAERGE CAV DFGG34DV AZZZZZZZXVAERGE CAV DFGG34DV AZZZZZZZXVAERGE CAV DFGG34DV AZZZZZZZXVAERGE CAV DFGG34DV AZZZZZZZXVAERGE CAV DFGG34DV...</p>
<a href="#menu">voltar</a>
<h2 id="ma"></h2>
<p>YXZ YXZXC YXZ YXZXC YXZ YXZXC YXZ YXZXC YXZ YXZXC YXZ YXZXC YXZ YXZXC YXZ YXZXC YXZ YXZXC YXZ YXZXC YXZ YXZXC YXZ YXZXC YXZ YXZXC YXZ YXZXC YXZ YXZXC</p>
<a href="#menu">voltar</a>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment