I cant seem to jump into new web page

Question

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 1-Feb-23 23:15pm

Raju Thapa

Updated 1-Feb-23 23:32pm

Add a Solution

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

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Chris Copeland · Answer 1 · 2023-02-01T23:32:00

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.