1
I’m making a site that I’ve hosted but after that , I saw that it’s very slow because it has many images to load at once, so I thought I could divide it into tabs to get to 10 elements and buttons 1,2,3 and I would like to know how to do this ?
My Page: http://awesomemods.epizy.com/Mods.html
Mods.HTML
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>AwesomeMods</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="CSS/Index.css">
<link rel="stylesheet" href="CSS/Mods.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<header>
<img src="Imagens/SiteFoto.png" id="logo">
</header>
<nav>
<a href="Index.html" id="menu">Home</a>
<a href="Mods.html" id="menu">Mods</a>
<a href="Donate.html" id="menu">Donate</a>
</nav>
<section>
<h1 id="ModsTitle">Mods</h1>
<button class="btn" data-categoria="a">A</button>
<button class="btn" data-categoria="b">B</button>
<button class="btn" data-categoria="c">C</button>
<button class="btn" data-categoria="d">D</button>
<button class="btn" data-categoria="e">E</button>
<button class="btn" data-categoria="f">F</button>
<button class="btn" data-categoria="g">G</button>
<button class="btn" data-categoria="h">H</button>
<button class="btn" data-categoria="i">I</button>
<button class="btn" data-categoria="j">J</button>
<button class="btn" data-categoria="k">K</button>
<button class="btn" data-categoria="l">L</button>
<button class="btn" data-categoria="m">M</button>
<button class="btn" data-categoria="n">N</button>
<button class="btn" data-categoria="o">O</button>
<button class="btn" data-categoria="p">P</button>
<button class="btn" data-categoria="q">Q</button>
<button class="btn" data-categoria="r">R</button>
<button class="btn" data-categoria="s">S</button>
<button class="btn" data-categoria="t">T</button>
<button class="btn" data-categoria="u">U</button>
<button class="btn" data-categoria="v">V</button>
<button class="btn" data-categoria="w">W</button>
<button class="btn" data-categoria="x">X</button>
<button class="btn" data-categoria="y">Y</button>
<button class="btn" data-categoria="z">Z</button>
<ul class="mods">
<li class="a" id="liMods">
<img src="Imagens/ModsImagens/ModsImagens_A/AlanWake/20180913211843_1.jpg" id="ModFoto">
<h3>Alan Wake</h3>
<a href="Mods/Mods_A/AlanWake.html" id="Mod">Download Page</a>
</li>
<li class="a" id="liMods">
<img src="Imagens/ModsImagens/ModsImagens_A/AGE_DefiniteveEdition/AoEDE_s_2020-05-14_13-24-52.png" id="ModFoto">
<h3>Age of Empires Definitive Edition</h3>
<a href="Mods/Mods_A/Age_Of_Empires_Definitive_Edition.html" id="Mod">Download Page</a>
</li>
<li class="b" id="liMods">
<img src="Imagens/ModsImagens/ModsImagens_B/Batman_Arkham_City/BatmanAC_2019-09-21_21-21-14.png" id="ModFoto">
<h3>Batman Arkham City</h3>
<a href="Mods/Mods_B/Batman_Arkham_City.html" id="Mod">Download Page</a>
</li>
<li class="b" id="liMods">
<img src="Imagens/ModsImagens/ModsImagens_B/Batman_Arkham_Asylum/ShippingPC-BmGame_2019-09-19_20-30-54.png" id="ModFoto">
<h3>Batman Arkham Asylum</h3>
<a href="Mods/Mods_B/Batman_Arkham_Asylum.html" id="Mod">Download Page</a>
</li>
<li class="c" id="liMods">
<img src="Imagens/ModsImagens/ModsImagens_C/COD_Black_Ops_2/20180831161614_1.jpg" id="ModFoto">
<h3>Call of Duty Black Ops 2 </h3>
<a href="Mods/Mods_C/COD_Black_Ops_2.html" id="Mod">Download Page</a>
</li>
<li class="c" id="liMods">
<img src="Imagens/ModsImagens/ModsImagens_C/COD_Modern_Warfare_2/iw4mp_2018-09-02_13-02-45.bmp.png" id="ModFoto">
<h3>Call of Duty Modern Warfare 2</h3>
<a href="Mods/Mods_C/COD_Modern_Warfare_2.html" id="Mod">Download Page</a>
</li>
<li class="c" id="liMods">
<img src="Imagens/ModsImagens/ModsImagens_C/COD_Modern_Warfare_3/20180902005423_1.jpg" id="ModFoto">
<h3>Call of Duty Modern Warfare 3</h3>
<a href="Mods/Mods_C/COD_Modern_Warfare_3.html" id="Mod">Download Page</a>
</li>
<li class="c" id="liMods">
<img src="Imagens/ModsImagens/ModsImagens_C/COD_World_at_War/20180902113505_1.jpg" id="ModFoto">
<h3>Call of Duty World at War</h3>
<a href="Mods/Mods_C/COD_World_at_War.html" id="Mod">Download Page</a>
</li>
<li class="c" id="liMods">
<img src="Imagens/ModsImagens/ModsImagens_C/Colony Survival/colonyclient_2017-12-13_21-57-42.bmp.png" id="ModFoto">
<h3>Colony Survival</h3>
<a href="Mods/Mods_C/Colony Survival.html" id="Mod">Download Page</a>
</li>
<li class="d" id="liMods">
<img src="Imagens/ModsImagens/ModsImagens_D/Dishonored/Dishonored_2020-06-10_23-09-46.png" id="ModFoto">
<h3>Dishonored </h3>
<a href="Mods/Mods_D/Dishonored.html" id="Mod">Download Page</a>
</li>
<li class="d" id="liMods">
<img src="Imagens/ModsImagens/ModsImagens_D/DeadIsland/20180201153105_2.jpg" id="ModFoto">
<h3>Dead Island</h3>
<a href="Mods/Mods_D/DeadIsland.html" id="Mod">Download Page</a>
</li>
<li class="d" id="liMods">
<img src="Imagens/ModsImagens/ModsImagens_D/Dead_Island_Riptide/20180201114224_1.jpg" id="ModFoto">
<h3>Dead Island Riptide</h3>
<a href="Mods/Mods_D/Dead_Island_Riptide.html" id="Mod">Download Page</a>
</li>
<li class="d" id="liMods">
<img src="Imagens/ModsImagens/ModsImagens_D/DeadSpace3/deadspace3_2017-12-10_00-04-25.bmp.png" id="ModFoto">
<h3>Dead Space 3</h3>
<a href="Mods/Mods_D/DeadSpace3.html" id="Mod">Download Page</a>
</li>
<li class="g" id="liMods">
<img src="Imagens/ModsImagens/ModsImagens_G/GTA3/gta3_2018-09-07_22-58-19.bmp.png" id="ModFoto">
<h3>Grand Theft Auto 3</h3>
<a href="Mods/Mods_G/GTA3.html" id="Mod">Download Page</a>
</li>
<li class="g" id="liMods">
<img src="Imagens/ModsImagens/ModsImagens_G/GTAVC/enb2018_8_4_2_46_35.bmp.png" id="ModFoto">
<h3>Grand Theft Auto Vice City</h3>
<a href="Mods/Mods_G/GTAVC.html" id="Mod">Download Page</a>
</li>
<li class="g" id="liMods">
<img src="Imagens/ModsImagens/ModsImagens_G/GTAV/20181222145005_1.jpg" id="ModFoto">
<h3>Grand Theft Auto V </h3>
<a href="Mods/Mods_G/GTAV.html" id="Mod">Download Page</a>
</li>
<li class="g" id="liMods">
<img src="Imagens/ModsImagens/ModsImagens_G/GhostRecon_FutureSoldier/20180711203804_1.jpg" id="ModFoto">
<h3>Ghost Recon Future Soldier</h3>
<a href="Mods/Mods_G/GhostRecon_FutureSoldier.html" id="Mod">Download Page</a>
</li>
<li class="h" id="liMods">
<img src="Imagens/ModsImagens/ModsImagens_H/Homefront_The_Revolution/20190106155847_1.jpg" id="ModFoto">
<h3>Homefront The Revolution</h3>
<a href="Mods/Mods_H/Homefront_The_Revolution.html" id="Mod">Download Page</a>
</li>
<li class="f" id="liMods">
<img src="Imagens/ModsImagens/ModsImagens_F/Fear/FEAR_2018-02-15_20-36-42.bmp.png" id="ModFoto">
<h3>F.E.A.R</h3>
<a href="Mods/Mods_F/Fear.html" id="Mod">Download Page</a>
</li>
<li class="f" id="liMods">
<img src="Imagens/ModsImagens/ModsImagens_F/FEAR2_Project_Origin/FEAR2_2017-09-28_21-37-30.bmp.png" id="ModFoto">
<h3>F.E.A.R.2 Project Origin</h3>
<a href="Mods/Mods_F/FEAR2_Project_Origin.html" id="Mod">Download Page</a>
</li>
<li class="f" id="liMods">
<img src="Imagens/ModsImagens/ModsImagens_F/Fear3/20171003212216_1.jpg" id="ModFoto">
<h3>F.E.A.R.3</h3>
<a href="Mods/Mods_F/Fear3.html" id="Mod">Download Page</a>
</li>
<li class="j" id="liMods">
<img src="Imagens/ModsImagens/ModsImagens_J/20190114214129_1.jpg" id="ModFoto">
<h3>Just Cause 2</h3>
<a href="Mods/Mods_J/JustCause2.html" id="Mod">Download Page</a>
</li>
<li class="m" id="liMods">
<img src="Imagens/ModsImagens/ModsImagens_M/MaxPayne/MaxPayne_2019-10-24_22-42-40.png" id="ModFoto">
<h3>Max Payne</h3>
<a href="Mods/Mods_M/MaxPayne.html" id="Mod">Download Page</a>
</li>
<li class="m" id="liMods">
<img src="Imagens/ModsImagens/ModsImagens_M/MaxPayne2/MaxPayne2_2019-11-16_21-39-21.png" id="ModFoto">
<h3>Max Payne 2</h3>
<a href="Mods/Mods_M/MaxPayne2.html" id="Mod">Download Page</a>
</li>
<li class="m" id="liMods">
<img src="Imagens/ModsImagens/ModsImagens_M/Minecraft/javaw_2018-07-16_01-22-01.bmp.png" id="ModFoto">
<h3>Minecraft</h3>
<a href="Mods/Mods_M/Minecraft.html" id="Mod">Download Page</a>
</li>
<li class="n" id="liMods">
<img src="Imagens/ModsImagens/ModsImagens_N/Need_For_Speed_Underground/speed_2018-10-11_18-56-44.bmp.png" id="ModFoto">
<h3>Need For Speed Underground</h3>
<a href="Mods/Mods_N/Need_For_Speed_Underground.html" id="Mod">Download Page</a>
</li>
<li class="n" id="liMods">
<img src="Imagens/ModsImagens/ModsImagens_N/Need_For_Speed_Underground2/SPEED2_2018-10-11_20-25-55.bmp.png" id="ModFoto">
<h3>Need For Speed Underground 2</h3>
<a href="Mods/Mods_N/Need_For_Speed_Underground2.html" id="Mod">Download Page</a>
</li>
<li class="n" id="liMods">
<img src="Imagens/ModsImagens/ModsImagens_N/No_More_Room_in_Hell/20180120230331_1.jpg" id="ModFoto">
<h3>No More Room in Hell</h3>
<a href="Mods/Mods_N/No_More_Room_in_Hell.html" id="Mod">Download Page</a>
</li>
<li class="p" id="liMods">
<img src="Imagens/ModsImagens/ModsImagens_P/PathofExile/20181012220002_1.jpg" id="ModFoto">
<h3>Path of Exile</h3>
<a href="Mods/Mods_P/PathofExile.html" id="Mod">Download Page</a>
</li>
<li class="r" id="liMods">
<img src="Imagens/ModsImagens/ModsImagens_R/Resident_Evil0_HDRemaster/re0hd_2018-12-27_22-28-05.bmp.png" id="ModFoto">
<h3>Resident Evil 0 HD Remaster</h3>
<a href="Mods/Mods_R/Resident_Evil0_HDRemaster.html" id="Mod">Download Page</a>
</li>
<li class="r" id="liMods">
<img src="Imagens/ModsImagens/ModsImagens_R/Resident_Evil1_HDRemaster/bhd_2018-09-29_16-21-09.bmp.png" id="ModFoto">
<h3>Resident Evil 1 HD Remaster</h3>
<a href="Mods/Mods_R/Resident_Evil1_HDRemaster.html" id="Mod">Download Page</a>
</li>
<li class="r" id="liMods">
<img src="Imagens/ModsImagens/ModsImagens_R/ResidentEvil4/bio4_2018-04-08_16-18-48.bmp.png" id="ModFoto">
<h3>Resident Evil 4</h3>
<a href="Mods/Mods_R/ResidentEvil4.html" id="Mod">Download Page</a>
</li>
<li class="r" id="liMods">
<img src="Imagens/ModsImagens/ModsImagens_R/ResidentEvil5/20180115124059_1.jpg" id="ModFoto">
<h3>Resident Evil 5</h3>
<a href="Mods/Mods_R/Resident_Evil5.html" id="Mod">Download Page</a>
</li>
<li class="r" id="liMods">
<img src="Imagens/ModsImagens/ModsImagens_R/ResidentEvil6/BH6_2018-07-22_01-27-28.bmp.png" id="ModFoto">
<h3>Resident Evil 6</h3>
<a href="Mods/Mods_R/ResidentEvil6.html" id="Mod">Download Page</a>
</li>
<li class="r" id="liMods">
<img src="Imagens/ModsImagens/ModsImagens_R/Resident_Evil_Revelations/rerev_2017-09-22_22-38-26.bmp.png" id="ModFoto">
<h3>Resident Evil Revelations</h3>
<a href="Mods/Mods_R/Resident_Evil_Revelations.html" id="Mod">Download Page</a>
</li>
<li class="r" id="liMods">
<img src="Imagens/ModsImagens/ModsImagens_R/Resident_Evil_Revelations2/rerev2_2017-10-06_23-52-39.bmp.png" id="ModFoto">
<h3>Resident Evil Revelations 2</h3>
<a href="Mods/Mods_R/Resident_Evil_Revelations2.html" id="Mod">Download Page</a>
</li>
<li class="r" id="liMods">
<img src="Imagens/ModsImagens/ModsImagens_R/Resident_Evil_Operation_Raccoon_City/20180727222652_1.jpg" id="ModFoto">
<h3>Resident Evil Operation Raccoon City</h3>
<a href="Mods/Mods_R/Resident_Evil_Operation_Raccoon_City.html" id="Mod">Download Page</a>
</li>
<li class="s" id="liMods">
<img src="Imagens/ModsImagens/ModsImagens_S/SaintsRow2/20190115012143_1.jpg" id="ModFoto">
<h3>Saints Row 2</h3>
<a href="Mods/Mods_S/SaintsRow2.html" id="Mod">Download Page</a>
</li>
<li class="s" id="liMods">
<img src="Imagens/ModsImagens/ModsImagens_S/SniperElite/SniperElite_2019-01-05_16-47-46.bmp.png" id="ModFoto">
<h3>Sniper Elite</h3>
<a href="Mods/Mods_S/SniperElite.html" id="Mod">Download Page</a>
</li>
<li class="s" id="liMods">
<img src="Imagens/ModsImagens/ModsImagens_S/SniperElite2/SniperEliteV2_2019-01-05_19-47-04.bmp.png" id="ModFoto">
<h3>Sniper Elite 2</h3>
<a href="Mods/Mods_S/SniperElite2.html" id="Mod">Download Page</a>
</li>
<li class="s" id="liMods">
<img src="Imagens/ModsImagens/ModsImagens_S/SniperElite3/SniperElite3_2019-01-06_00-46-48.bmp.png" id="ModFoto">
<h3>Sniper Elite 3</h3>
<a href="Mods/Mods_S/SniperElite3.html" id="Mod">Download Page</a>
</li>
<li class="s" id="liMods">
<img src="Imagens/ModsImagens/ModsImagens_S/SniperElite4/20190106213840_1.jpg" id="ModFoto">
<h3>Sniper Elite 4</h3>
<a href="Mods/Mods_S/SniperElite4.html" id="Mod">Download Page</a>
</li>
<li class="s" id="liMods">
<img src="Imagens/ModsImagens/ModsImagens_S/State_of_Decay_Year_One/StateOfDecay_2020-06-03_21-41-50.png" id="ModFoto">
<h3>State of Decay Year One</h3>
<a href="Mods/Mods_S/State_of_Decay_Year_One.html" id="Mod">Download Page</a>
</li>
<li class="t" id="liMods">
<img src="Imagens/ModsImagens/ModsImagens_T/TheDivision/20181125191839_1.jpg" id="ModFoto">
<h3>Tom Clancy's The Division</h3>
<a href="Mods/Mods_T/TheDivision.html" id="Mod">Download Page</a>
</li>
</ul>
</section>
<aside>
<div id="BannerList">
</div>
</aside>
<footer>
<ol>
<li><h3 id="separar">Mods Links</h3></li>
<li id="links"><a href="https://reshade.me/" target="_blank" id="modlink"><img src="Imagens/Reshade Button.png" id="modlogo"> Reshade</a></li>
<li id="links"><a href="http://enbdev.com/" target="_blank" id="modlink"><img src="Imagens/ENBSeries Button.png" id="modlogo">EnbSeries</a></li>
<li id="links"><a href="https://www.moddb.com" title="Game Mod Development Home" target="_blank" id="modlink"><img src="https://media.moddb.com/images/global/moddb.png" alt="Mod DB - Change the Game" border="0" width="42" height="44" id="modlogo">Moddb</a></li>
<li id="links"><a href="https://www.nexusmods.com/" target="_blank" id="modlink"><img src="Imagens/kisspng-the-elder-scrolls-v-skyrim-nexus-mods-borderlands-5b3803b53afeb3.6385348015303976212417.png" id="modlogo">Nexus Mods</a></li>
</ol>
<a href="https://www.youtube.com/channel/UCcALwpmzS7rZ3w0VczM4OJw" target="_blank"> <img src="Imagens/BannerSite.png" id="banner"> </a>
</footer>
<script>
$('.btn').on('click', function(){
var categoria = $(this).attr('data-categoria')
$('.mods li').each(function(){
if(!$(this).hasClass(categoria)){
$(this).hide()
}else{
$(this).show()
}
})
})
</script>
</body>
</html>