// if you want to do this with others too then simply remove a href //and add event listener to each element of li //for styling you can give the styling to li same as of a href ---------------------------- how may i change the format make the shown like this format logo home glassses snack mouse cart home glasses snack mouse cart
this "landing "html is like this
-----------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>store</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="main.html">
<img src="https://www.google.com/search?q=logo&sxsrf=AOaemvKAQ5i3S0qcEg4hUtELMZ5JAXBGHA:1635729159479&source=lnms&tbm=isch&sa=X&ved=2ahUKEwiu5P77_fXzAhXDmWoFHXO4CIoQ_AUoAXoECAEQAw&biw=1920&bih=875&dpr=1#imgrc=-eDJED2XpumqjM" alt="logo"width="30" height="20">
</a>
</div>
<ul class="nav navbar-nav">
<!-- opens main.html in a separate page -->
<li class="active"><a href="main.html" target="_blank">Home</a></li>
<li><a href="glass.html" target="_blank">glasses</a></li>
<li><a href="snack.html" target="myFrame">mouse</a></li>
<li><a href="mouse.html" target="_blank">snack</a></li>
<li><a href="cart.html" target="_blank">cart</a></li>
<li id = "home"></a> home</a></li>
<li id = "glass"></a> glasses</a></li>
<li id = "mouse"></a> mouse</a></li>
<li id = "snak"></a> snack</a></li>
<li id = "cart"></a> cart</a></li>
</ul>
</div>
</nav>
<iframe src="main.html" width="1280" height="800" id="FrameId"></iframe>
</body>
<script>
var FrameId = document.getElementById("FrameId"); //selecting iframe element
var glass = document.getElementById("glass"); // selecting glass element
glass.addEventListener("click",()=>{ //adding onclick listener
FrameId.src="glass.html"
})
// if you want to do this with others too then simply remove a href
//and add event listener to each element of li
//for styling you can give the styling to li same as of a href
</script>
</html>
----------------------------
how may i change the format
make the shown like this format
logo home glassses snack mouse cart
home glasses snack mouse cart
Step by step
Solved in 3 steps with 1 images
