Click here to Skip to main content
15,920,602 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
What i want is ,when i click on navigation , i want that navigation'c background to be changed.Background changed but for some reason i am still at home and navigation link is not working.Example after clicking on navigation,i am still on home page http://127.0.0.1:5500/index.html What i want is http://127.0.0.1:5500/nav/technology.html


What I have tried:

<pre><!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>Document</title>
	</head>
	<body>
		<header class="header">
			<h1 class="nav-logo">
				<a href="index.html" class="header-logo">
					<span>t</span><span>a</span><span>l</span><span>e</span></a
				>
			</h1>
			<nav class="nav">
				<ul class="nav-list">
					<li class="nav-item"><a href="index.html">Home</a></li>
					<li class="nav-items">
						<a href="nav/world.html" class="nav-item-link">World</a>
					</li>
					<li class="nav-items">
						<a href="nav/technology.html " class="nav-item-link">technology</a>
					</li>
					<li class="nav-items">
						<a href="nav/gaming.html" class="nav-item-link">gaming</a>
					</li>
					<li class="nav-items">
						<a href="nav/sports.html" class="nav-item-link">sports</a>
					</li>
					<li class="nav-items">
						<a href="nav/blockchain.html" class="nav-item-link">blockchain</a>
					</li>
					<li class="nav-items">
						<a href="nav/entertain.html" class="nav-item-link">entertainment</a>
					</li>
					<li class="nav-items">
						<a href="nav/science.html" class="nav-item-link">science</a>
					</li>
					<li class="nav-items">
						<a href="nav/books.html" class="nav-item-link">books</a>
					</li>
				</ul>
			</nav>
			<div class="header-label">
				<label for="search-con" class="search-con">search</label>
				<input
					type="search"
					id="search-con"
					name="w"
					placeholder="search tale"
				/>
			</div>
		</header>
	</body>
</html>



"use strict";
const navItemLink document.querySelectorAll(".nav-item-link");
const header = document.querySelector(".header");

navItemLink.forEach((items) => {
	items.addEventListener("click", function (e) {
		e.preventDefault();
		console.log("this");
		header.classList.add("header-nav");
		console.log(items, this);
	});
});


@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,400&display=swap");
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  letter-spacing: 0.05rem;
  box-sizing: inherit; }

html {
  font-size: 62.5%; }

body {
  box-sizing: border-box; }

body {
  font-family: "Roboto", sans-serif;
  font-weight: 500; }

.nav-logo span {
  background-color: #fff;
  color: #000;
  margin-right: 1rem;
  text-transform: uppercase;
  padding: 0.3rem;
  font-size: 2.2rem;
  font-weight: 600; }

.search-con {
  color: #fff;
  font-family: inherit;
  align-items: flex-end;
  display: none; }

input[type="search"] {
  padding: 0.8rem;
  font-size: 1.4rem;
  text-transform: capitalize;
  font-family: inherit;
  background-color: #393636;
  border: none;
  color: #fff;
  width: 100%; }

.nav-logo a {
  text-decoration: none; }

.nav-list {
  display: flex;
  list-style: none;
  column-gap: 2.5rem;
  align-items: center;
  justify-content: center;
  margin-top: 8px; }

.nav-items a,
.nav-item a {
  text-decoration: none;
  font-size: 1.3rem;
  color: #fff;
  text-transform: capitalize; }

.nav-items a::after,
.nav-item a::after {
  content: "";
  display: block;
  margin: auto;
  height: 2px;
  margin-top: 8px;
  width: 100%;
  bottom: 12px;
  background-color: transparent;
  transition: all 0.4s; }

.nav-items > a:hover::after,
.nav-item > a:hover::after {
  background-color: #fff; }
.header {
  display: flex;
  background-color: #000;
  padding: 2rem;
  align-items: center;
  justify-content: space-around;
  position: sticky;
  width: 100%; }
  .header ::placeholder {
    color: #f8f9fa;
    opacity: 0.5; }

.nav-logo {
  cursor: pointer; }
.header-nav {
  background-color: #fff; }
Posted
Updated 1-Feb-23 23:32pm
Comments
Member 15627495 2-Feb-23 5:32am    
are the other link working well ?

in your 'technology' link, you have a 'space' at end, maybe a mistake.

one more thing, you don't need to add an event with 'a href' , it's already in.
Raju Thapa 2-Feb-23 5:47am    
when i remove js code. Links are working but when I add js code,links are not working.Any idea why?

1 solution

What i want is ,when i click on navigation , i want that navigation'c background to be changed

I'm not sure I understand fully, do you mean that when a navigation link is clicked you expect the link to the current page to have a specific background color? If so, that's do-able but it depends on what you're using to serve the pages. If it's server-side rendering (ie. Spring, ASP.NET, Django, PHP) then you probably need to add a flag in the server-side which you pass into the page model which will then set a class on the links. If it's client-side rendering (ie. Angular, React, Vue) and you're using JS routing then I think each of these frameworks have their own attributes/processors (ie. Angular has routerLinkActive[^])

I'm not seeing any evidence of using a framework though, these look like static HTML pages with some Javascript so I can't really suggest anything.

for some reason i am still at home and navigation link is not working.Example after clicking on navigation,i am still on home page http://127.0.0.1:5500/index.html What i want is http://127.0.0.1:5500/nav/technology.html

This one's quite easy to diagnose, you're cancelling the navigation in your Javascript:
items.addEventListener("click", function (e) {
  e.preventDefault()

What you're saying here is "when someone clicks a link, cancel navigating to that link" so obviously your page won't navigate to whatever address you've provided.
 
Share this answer
 
Comments
Raju Thapa 2-Feb-23 5:48am    
I am new at this. Exactly what should I do?
Chris Copeland 2-Feb-23 6:35am    
It depends exactly what you're trying to do, as I say it depends how you're serving your pages. You're either using server-side rendering via PHP or a similar backend framework, or you're serving your pages using a client-side framework like Angular/React. If you're not using either of these then you're creating static pages which, depending on the requirements of your project, may or may not be suitable.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900