We Keep Coding

Anchor href doesn't work when i add dynamically hr tag after user click

<div class="nav-center">
<ul class="center">
<a class="nav-item" href="">
<li>Random facts</li>
<hr class="line">
</a>
<a class="nav-item" href="/blog/technology/">
<li>Technology</li>
</a>
<a class="nav-item" href="/blog/sport/">
<li>Sports</li>
</a>
<a class="nav-item" href="">
<li>About poeters</li>
</a>
</ul>
</div>
//JavaScript Code
let navItems = document.querySelectorAll(".nav-item");
let addchild = document.createElement("hr");
addchild.classList.add("line");
let Handler = (e) => {
e.preventDefault();
navItems.forEach((node) => {
if (node.contains(removechild)){
node.removeChild(removechild);
}
});
e.currentTarget.appendChild(addchild);
};
navItems.forEach((node) => {
node.addEventListener("click", Handler);
});
See the first anchor tag i added hr tag through html it is showing line below Random Facts and also works fine for my expected link.. But when i add dynamically after user click, line shows but anchor link does not work after user click why??

NOTE: Your HTML is invalid
Here is a version that tests the URL. This script needs to be in all pages
LIVE DEMO
window.addEventListener("load",function() {
// const url = new URL(location.href); // uncomment on your server
const url = new URL("https://www.yourserver.com/blog/technology/");
const path = url.pathname;
let where = path.split("/")
if (!where[where.length-1]) where.pop() // last part of url ending with /
where = where.pop(); // now we have the folder or filename
console.log("w",where,"path",path)
const link = document.querySelector(".nav-center a[href*='"+where+"']");
if (link) link.parentNode.insertBefore(document.createElement("hr"), link.nextSibling);
else console.log("from path",path,"where not found",where)
})
<script src="/blog/scripts/nav.js"></script>
<div class="nav-center">
<ul class="center">
<li><a class="nav-item" href="/blog/index.html">Home</a></li>
<li><a class="nav-item" href="/blog/random/">Random facts</a></li>
<li><a class="nav-item" href="/blog/technology/">Technology</a></li>
<li><a class="nav-item" href="/blog/sport/">Sports</a><br/></li>
<li><a class="nav-item" href="/blog/about/">About</a></li>
</ul>
</div>
<h1>Home</h1>
Here is a version that expect you to fetch/ajax your pages into the existing page. Also it is using delegation
let nav = document.querySelector(".nav-center ul");
let addchild = document.createElement("hr");
addchild.classList.add("line");
const handler = e => {
e.preventDefault();
const tgt = e.target.closest("li");
const url = tgt.querySelector("a")?.href ?? "";
if (url) {
nav.querySelector(".line")?.remove();
tgt.querySelector("a").appendChild(addchild);
// here you would ajax the href into a div elsewhere or target an iFrame
console.log(url)
}
};
nav.addEventListener("click", handler);
<div class="nav-center">
<ul class="center">
<li><a class="nav-item" href="">Random facts</a></li>
<li><a class="nav-item" href="/blog/technology/">Technology</a></li>
<li><a class="nav-item" href="/blog/sport/">Sports</a><br/></li>
<li><a class="nav-item" href="">About poeters</a></li>
</ul>
</div>

How to add/remove active class in Bootstrap4

I am trying to add/remove active class in the navbar using a snipped from similar questions, however nothing happens in my case. It´s very possible I am missing out something that could not figured out so far.
Here is my HTML
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item active" id="dashboard">
<a class="nav-link" href="{% url 'dashboard' %}">Dashboard</a>
</li>
<li class="nav-item" id="painel_regras">
<a class="nav-link" href="{% url 'painel_regras' %}">Todos as Regras</a>
</li>
</ul>
</div>
Here is the Javascript part
<script type="text/javascript">
var navContainer = document.getElementById("navbarColor01");
var navitem = navContainer.getElementsByClassName("nav-item");
for (var i = 0; i < navitem.length; i++) {
navitem[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
</script>

There might be conflicts with other elements that have the active class, so when you access current[0], the item at index 0 is not the one in the navbar. I have replaced document.getElementsByClassName with document.querySelector to make the element more specific.
var navContainer = document.getElementById("navbarColor01");
var navitem = navContainer.getElementsByClassName("nav-item");
for (var i = 0; i < navitem.length; i++) {
navitem[i].addEventListener("click", function() {
var current = document.querySelector("#navbarColor01 .nav-item.active");
current.className = current.className.replace(" active", "");
this.className += " active";
});
}
.active {
font-weight: bold;
}
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item active" id="dashboard">
<a class="nav-link" href="#">Dashboard</a>
</li>
<li class="nav-item" id="painel_regras">
<a class="nav-link" href="#">Todos as Regras</a>
</li>
</ul>
</div>

Enable and Disable tab using jQuery/JavaScript

I need to enable and disable tab based select results.Below the code I am working.If device B status is On-Line I need to disable Device-V tab.How to implement this using JavaScript/jQuery.
jQuery:
if(result.includes("On-line") ){
$(selected_device_id).html("");
//Need to implement disable function here
$(selected_device_id).append(result+" ✅");
HTML File:
<div class="panel">
<br>
<ul class="nav nav-pills nav-tabs">
<li class="active">
<a
data-toggle="tab"
href="#Device-B"
onclick="document.getElementById('Object').value = '';
document.getElementById('first_i').value = '';
document.getElementById('second_i').value = '';
document.getElementById('third_i').value = '';">
<i>
<b>Device B</b>
</i>
</a>
</li>
<li>
<a
data-toggle="tab"
href="#Device-V"
onclick="document.getElementById('tr181_object').value = '';
document.getElementById('first_i').value = '';
document.getElementById('second_i').value = '';
document.getElementById('third_i').value = '';">
<i>
<b>Video</b>
</i>
</a>
</li>
</div>

$(document).ready(function()
{
var switch_ch = 0 ;
$(".linktoggle").on("click",function(){
i = $(this).index(".linktoggle") ;
if( $(".linktoggle").attr("href") === "#Device-B")
{
if( switch_ch === 0 )
{
$(".linktoggle:eq(0)").show();
$("li:eq(0)").show();
$(".linktoggle:eq(1)").hide();
$("li:eq(1)").hide();
switch_ch = 1 ;
}
else
{
$(".linktoggle:eq(1)").show();
$("li:eq(1)").show();
switch_ch = 0 ;
}
}
if( $(".linktoggle").attr("href") === "#Device-V")
{
$(".linktoggle:eq("+i +")").hide();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="panel">
<br>
<ul class="nav nav-pills nav-tabs">
<li class="active">
<a
class="linktoggle"
href="#Device-B" >
<i>
<b>Device B</b>
</i>
</a>
</li>
<li>
<a
class="linktoggle"
data-toggle="tab"
href="#Device-V"
>
<i>
<b>Video</b>
</i>
</a>
</li>
</div>

How to make an draggable element look like "moved out" when being dragged?

I tried to create a navbar with draggable item. It works, but there seems no move effect (the ghost effect) in spite of adding the "effectAllowed" property. How can I achieve that?
class Sortable {
constructor(el) {
this.rootEl = el;
this.onInit();
}
onInit() {
// add draggable attribute = true to every li
Array.from(this.rootEl.children).forEach((childEl) => {
childEl.draggable = true;
});
this.rootEl.addEventListener('dragstart', (e) => {
console.log(e.target.parentNode);
// we dont need the a tag but the li tag
this.dragEl = e.target.parentNode;
e.dataTransfer.setData('text', this.dragEl.textContent);
e.dataTransfer.effectAllowed = 'move';
e.target.classList.add("no-hover");
this.rootEl.addEventListener('dragover', this.onDragOver.bind(this), false);
this.rootEl.addEventListener('dragend', this.onDragEnd.bind(this), false);
}, false);
}
onDragOver(e) {
e.preventDefault();
e.dataTransfer.dropEffect = 'move';
var target = e.target.parentNode;
if (target && target !== this.dragEl && e.target.nodeName == 'A') {
console.log(1111)
this.rootEl.insertBefore(this.dragEl, target.nextSibling || target);
} else {
console.log(target, this.dragEl, e.target.nodeName)
}
}
onDragEnd(e) {
e.preventDefault();
e.target.classList.add("no-hover");
this.rootEl.removeEventListener('dragover', this.onDragOver.bind(this), false);
this.rootEl.removeEventListener('dragend', this.onDragEnd.bind(this), false);
}
}
// initialize the js
new Sortable(document.getElementById("nav-tabs-routes"));
a.no-hover {
background-color: transparent!important;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<ul id="nav-tabs-routes" class="nav nav-tabs nav-tabs-routes">
<li id="link1">
<a class="active" href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i> Sales</a>
</li>
<li id="link2">
<i class="fa fa-barcode" aria-hidden="true"></i> Skus
</li>
<li id="link3">
<i class="fa fa-file" aria-hidden="true"></i> Import/Export Data
</li>
<li id="link4">
<i class="fa fa-asterisk" aria-hidden="true"></i> Locations
</li>
<li id="link5">
<i class="fa fa-th-large" aria-hidden="true"></i> Stations
</li>
</ul>
I also pushed my code into codepen : the sortable list

Change menu background color for current page

I have a menu with a submenu
The html
<ul class="nav navbar-nav float-xs-right top-nav">
<li class="nav-item"><a class="nav-link" href="/our-work/">Our Work</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="/what-we-do/">What We Do</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="/what-we-do/we-develop/">We Develop</a>
<a class="dropdown-item" href="/what-we-do/we-promote/">We Promote</a>
<a class="dropdown-item" href="/what-we-do/we-support/">We Support</a>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="/contact/">Contact</a></li>
</ul>
I am adding bg color using jQuery
function activeMenu() {
var curr_url = window.location.pathname ;
var curr_menu = $("a[href$='" + curr_url + "']");
$(curr_menu).css("background", "#fff");
}
activeMenu();
It is changing bg color of a tag and if it is submenu than the submenu's bg color is changing. But I want to change the bg color of the parent menu not the submenu.
Is there a possible solution to select the parent menu using jQuery?

See this jQuery method: https://api.jquery.com/parent/
In your case, I think this is what you're looking for;
function activeMenu() {
var curr_url = window.location.pathname ;
var curr_menu = $("a[href$='" + curr_url + "']");
$(curr_menu).parent(".dropdown-toggle").css("background", "#fff");
}
activeMenu();

You can do this with vanilla javascript. Let's say your <ul> has an id of "menu":
const menu = document.getElementById("menu").children;
const list = [...menu]
const currentPage = list.filter(li => li.children[0].pathname == window.location.pathname)
currentPage[0].className = "active"