This question already has answers here:
Highlight current page in jquery
(3 answers)
Closed 7 years ago.
Hi I'm trying to make the link of the current page the user is on styled differently to the other links in the navigation bar.
<script src="jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(function() {
$('.Global_Nav li').each(function() {
var href = $(this).find('a').attr('href');
if ($(this).attr('href') === window.location.pathname) {
$(this).addClass('current');
}
});
});
})
</script>
This is the jquery i've found which seems to be the code that makes the most sense for what i'm trying to achieve.
.Global_Nav li{
display: inline-block;
text-align: center;
height: 35px;
padding-right: 14px;
padding-left: 14px;
list-style: none;
border-left: 1px solid white;
line-height: 35px;
font-size: 22px;
color: white;
}
.Global_Nav li.current{
display: inline-block;
text-align: center;
height: 35px;
padding-right: 14px;
padding-left: 14px;
list-style: none;
border-left: 1px solid white;
line-height: 35px;
font-size: 22px;
color: #B8B8C7;
text-decoration: underline;
}
The CSS above is what the links should be styled like beforehand and when it's the current page. Below is the HTML of the Navigation bar.
<nav class="Global_Nav">
<ul id="Global_links">
<li>Home</li>
<li>News</li>
<li>Multimedia</li>
<li>Social</li>
</ul>
</nav>
Thanks in advance for your help.
use location.href.
This post url using window.location.pathname : "/questions/28988304/jquery-current-page-link-styling"
This post url using location.href : "Jquery current page link styling"
Use window.location.href instead of window.location.pathname:
if ( $(this).attr('href') == window.location.href ) {
$(this).addClass('current');
}
Related
I have a page with an initial description, followed by 2 buttons, where the user can choose typeA or typeB. They work by "target": when the user clicks typeA comes the content relative to typeA, bellow the buttons; same to typeB.
typeA is the most common selection, then, when the page loads, a javascript emulates the click to typeA and opens respective content. To avoid hidden the initial description, there is another javascript to put the page at the top. Worked on Chrome and Edge, not on Firefox.
I would like to repeat the same process when the user clicks: opens the respective content, but positioning the page at the top, or, at least, showing the buttons. I thought event onClick calling the same js backToTop would worked - but not.
I put an alert on js and enters there but not execute: always keeps the content of the button selected in its better visibility.
I tried:
window.location.href = '#top';
window.scrollBy(0, -500);
document.html.scrollTop = document.documentElement.scrollTop = 0;
without success.
What am I doing wrong?
<head>
<meta charset="UTF-8">
<title>TOP PAGE TEST</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body,html {margin-left:auto; margin-right:auto;width:70%; font-family:verdana; font-size:1.2em;}
.menuFAQ {background:#aaa; font-size:2em; width:100%;}
.menuFAQ ul {list-style-type:none; position:relative; margin-left:-40px; /* to avoid user agent chrome */}
.menuFAQ li {display:inline-block; margin-top:10px; margin-bottom:10px; width:49%; background:#fff; text-align:center; box-shadow:2px 3px 4px 0px rgba(170,170,170,1); font-weight:400; line-height:80px;}
.menuFAQ li a {display:block; color:#020062; background:#fff; font-weight:400; text-decoration:none;}
.menuFAQ li .active,.menuFAQ li:hover a {color:#fff; font-weight:400; background-image:linear-gradient(#165686, #0f3a5a); }
:target {color:#fff;font-size:1em;}
div.items>div:not(:target) {display:none}
div.items>div:target {display:block; margin-left:auto; margin-right:auto; color:#000; border:1px solid #aaa;}
</style>
</head>
<body>
<div id="top">Top Page</div>
<br>textExp1<br>textExp2<br>textExp3<br>textExp4<br>textExp5
<div class="menuFAQ">
<ul>
<li><a id="preferedFAQ" onclick="backToTop()" class="target" href="#typeA">TypeA</a></li>
<li><a onclick="backToTop()" class="target" href="#typeB">TypeB</a></li>
</ul>
</div>
<div class="items">
<div id="typeA">
<nav>
A long and variable text size to explain TypeA <br>text1A<br>text2A<br>text3A<br>text4A<br>text5A<br>text6A<br>text7A<br>text8A<br>text9A<br>textAA<br>textBA<br>textCA<br>textDA
<br>[...]
</nav>
</div>
</div>
<div class="items">
<div id="typeB">
<nav>
A long and variable text size to explain TypeB
<p>text1B</p><p>text2B</p><p>text3B</p>
<br>[...]
</nav>
</div>
</div>
<script>
const allTargetLinks = document.querySelectorAll('.target')
allTargetLinks.forEach(targetLink => {
targetLink.addEventListener('click', () => {
allTargetLinks.forEach(targetLink => {
targetLink.classList.remove('active')
})
targetLink.classList.add('active')
})
})
window.onload = function() {assignPreferedFAQ()};
function assignPreferedFAQ() {
document.getElementById("preferedFAQ").click();
backToTop();
};
function backToTop() {
//document.html.scrollTop = document.documentElement.scrollTop = 0;
//document.body.scrollTop = document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
};
</script>
You had a real mess there regarding how you process click events and href attribute, i.e:
You had onclick attribute on your links, and you were adding yet another listener to them in JS
You didn't event.preventDefault() in your function, and default browser behavior when you click on a link is to get you to its href path
I've cleaned up a bit and changed some things. Since we need to prevent default behavior :target selector will no longer work, so instead I did what you've already been doing with links, and added an active class to your content. clickHandler() will now remove and add class active as necessary. At the end just scroll to the top. Here's the snippet:
document.querySelectorAll('.target').forEach(targetLink => targetLink.addEventListener('click', clickHandler, false));
function clickHandler(ev) {
ev.preventDefault(); // prevent browser from automatically scrolling to href pos
if (!ev.currentTarget.classList.contains('active')) {
// disable active elements
document.querySelector('.target.active').classList.remove('active');
document.querySelector('.items div.active').classList.remove('active');
// add class to the clicked on button and its corresponding content tab
ev.currentTarget.classList.add('active');
// to prevent pointless string slicing below, you'd have to store ids somewhere else i.e in the data-id attribute
const id = ev.currentTarget.href.slice(ev.currentTarget.href.lastIndexOf('#') + 1);
document.getElementById(id).classList.add('active');
}
window.scrollTo(0,0);
}
* {
font-family: verdana;
font-size: 1em;
}
.menuFAQ {
background: #aaa;
font-size: 2em;
width: 100%;
}
.menuFAQ ul {
list-style-type: none;
text-align: center;
padding: 0;
/* to avoid user agent chrome */
}
.menuFAQ li {
display: inline-block;
width: 48%;
margin-top: 10px;
margin-bottom: 10px;
background: #fff;
text-align: center;
box-shadow: 2px 3px 4px 0px rgba(170, 170, 170, 1);
font-weight: 400;
line-height: 80px;
}
.menuFAQ li a {
display: block;
color: #020062;
background: #fff;
font-weight: 400;
text-decoration: none;
}
.menuFAQ li .active,
.menuFAQ li:hover a {
color: #fff;
font-weight: 400;
background-image: linear-gradient(#165686, #0f3a5a);
}
div.items>div {
display: none;
}
div.items>div.active {
display: block;
margin-left: auto;
margin-right: auto;
color: #000;
border: 1px solid #aaa;
}
<div id="top">Top Page</div>
<br>textExp1<br>textExp2<br>textExp3<br>textExp4<br>textExp5
<div class="menuFAQ">
<ul>
<li><a class="target active" href="#typeA">TypeA</a></li>
<li><a class="target" href="#typeB">TypeB</a></li>
</ul>
</div>
<div class="items">
<div class="active" id="typeA">
<nav>
A long and variable text size to explain TypeA <br>text1A<br>text2A<br>text3A<br>text4A<br>text5A<br>text6A<br>text7A<br>text8A<br>text9A<br>textAA<br>textBA<br>textCA<br>textDA
<br>[...]
</nav>
</div>
</div>
<div class="items">
<div id="typeB">
<nav>
A long and variable text size to explain TypeB
<p>text1B</p>
<p>text2B</p>
<p>text3B</p>
<br>[...]
</nav>
</div>
</div>
Note that instead of artificially clicking at the page load, now your content just loads with class active.
Hope this help you.
< script >
window.onload = function() {
document.getElementById("preferedFAQ").click();
backToTop();
};
function backToTop() {
document.documentElement.scrollTop = document.body.scrollTop = 0;
//alert("enter backToTop");
var elmnt = document.getElementById("top");
var x = elmnt.scrollLeft;
var y = elmnt.scrollTop;
}; <
/script>
body,
html {
margin-left: auto;
margin-right: auto;
width: 70%;
font-family: verdana;
font-size: 1.2em;
}
.menuFAQ {
background: #aaa;
font-size: 2em;
width: 100%;
}
.menuFAQ ul {
list-style-type: none;
position: relative;
margin-left: -40px;
/* to avoid user agent chrome */
}
.menuFAQ li {
display: inline-block;
margin-top: 10px;
margin-bottom: 10px;
width: 49%;
background: #fff;
text-align: center;
box-shadow: 2px 3px 4px 0px rgba(170, 170, 170, 1);
font-weight: 400;
line-height: 80px;
}
.menuFAQ li a {
display: block;
color: #020062;
background: #fff;
font-weight: 400;
text-decoration: none;
}
.menuFAQ li .active,
.menuFAQ li:hover a {
color: #fff;
font-weight: 400;
background-image: linear-gradient(#165686, #0f3a5a);
}
:target {
color: #fff;
font-size: 1em;
}
div.items>div:not(:target) {
display: none
}
div.items>div:target {
display: block;
margin-left: auto;
margin-right: auto;
color: #000;
border: 1px solid #aaa;
}
<div id="top">Top Page</div> <br>textExp1<br>textExp2<br>textExp3<br>textExp4<br>textExp5<br>textExp6<br>textExp7<br>textExp8<br>textExp9<br>textExpA<br>textExpB<br>textExpC<br>textExpD
<br>textExpE
<div class="menuFAQ">
<ul>
<li><a id="preferedFAQ" onclick="backToTop()" class="target" href="#typeA">TypeA</a></li>
<li><a onclick="backToTop()" class="target" href="#typeB">TypeB</a></li>
</ul>
</div>
<div class="items">
<div id="typeA">
<nav>
A long and variable text size to explain TypeA <br>text1A<br>text2A<br>text3A<br>text4A<br>text5A<br>text6A<br>text7A<br>text8A<br>text9A<br>textAA<br>textBA<br>textCA<br>textDA
<br>[...]
</nav>
</div>
</div>
<div class="items">
<div id="typeB">
<nav>
A long and variable text size to explain TypeB
<p>text1B</p>
<p>text2B</p>
<p>text3B</p>
<br>[...]
</nav>
</div>
</di
This question already has answers here:
Working with jQuery when there is no Internet connection
(6 answers)
Closed 4 years ago.
I've a script on my page who should work if is internet connection ( i mean.. load text when click button or show less if is needed to ) and hide buttons if no connection.
I mention that I use jquery-3.3.1.slim.min.js (script src link-website) library.
I'm using tags directly to HTML head.
When is connection ( == 'true' ) there is a part with load more paragraphs / showless p . When is not internet I should hide those divs and show all text.
/*JQUERY CODE*/
var connection = "";
connection += navigator.onLine;
if (connection == 'true') {
$(document).ready(function() {
size_p = $("#myList p").length;
x = 0;
$('#myList p:lt(' + x + ')').show();
$('#loadMore').click(function() {
x = (x + 4 <= size_p) ? x + 4 : size_p;
$('#myList p:lt(' + x + ')').show();
});
$('#showLess').click(function() {
x = (x - 4 < 0) ? 4 : x - 4;
$('#myList p').not(':lt(' + x + ')').hide();
});
});
} else
if (connection == 'false') {
$("#loadMore").css("display", "none");
$("#showLess").css("display", "none");
$("#myList").css("display", "inline");
}
/*CSS CODE*/
#myList p {
display: none;
}
#loadMore {
color: green;
cursor: pointer;
padding: 5px 5px 5px 10px;
cursor: pointer;
background: #e8e8e8;
font-size: 14px;
width: 115px;
margin: 5px;
position: relative;
border-radius: 15px;
}
#loadMore:hover #showLessa:hover #showLess:hover {
color: black;
}
#showLess {
color: red;
cursor: pointer;
padding: 5px 5px 5px 10px;
cursor: pointer;
background: #e8e8e8;
font-size: 14px;
width: 115px;
margin: 5px;
position: relative;
border-radius: 15px;
}
#load_no_internet {
display: none;
color: green;
cursor: pointer;
padding: 5px 5px 5px 10px;
cursor: pointer;
background: #e8e8e8;
font-size: 14px;
width: 115px;
margin: 5px;
position: relative;
border-radius: 15px;
}
#load_no_internet:hover #show_no_interneta:hover #show_no_internet:hover {
color: black;
}
#show_no_internet {
display: none;
color: red;
cursor: pointer;
padding: 5px 5px 5px 10px;
cursor: pointer;
background: #e8e8e8;
font-size: 14px;
width: 115px;
margin: 5px;
position: relative;
border-radius: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p> SOME TEXT HERE </p>
<p> SOME TEXT HERE </p>
<p> SOME TEXT HERE </p>
<p> SOME TEXT HERE </p>
<p> SOME TEXT HERE </p>
<p> SOME TEXT HERE </p>
<p> SOME TEXT HERE </p>
<div id="myList">
<p> SOME TEXT HERE </p>
<p> SOME TEXT HERE </p>
<p> SOME TEXT HERE </p>
<p> SOME TEXT HERE </p>
</div>
<div id="loadMore">See more text...</div>
<div id="showLess">See less text...</div>
My problem is that when I have no internet.. nothing work.
I would like to give me some advice how to make it work if no internet connection.
Taking your question literally as "when I have no internet..."
You're requesting jQuery via a CDN; IF you literally have no internet connection then you're not going to have access to jQuery.
You need to download jQuery so you have a LOCAL copy available. Download it form the jQuery site then save it into your project. Then change your script tag to request it locally like so:
<script src="/jquery.min.js"></script>
It's generally best practice to save your JS related files under a sub directory such as /js. So your script tag would look like this:
<script src="/js/jquery.min.js"></script>
you are loading the following script from an external server
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
this is not available when you do not have internet. Best thing you can do is download the script and put it in the same folder as your index.html and include it with:
<script src="/jquery.min.js"></script>
All of a sudden I have unintentionally been causing a piece of code to no longer work. I am using the below in order to show and simultaneously hide content within the same website file:
<script type="text/javascript">
$('.tabs').on('click', 'a', function(){
$('section').hide();
$($(this).attr('data-url')).show();
var $this = $(this),
$ul = $this.parents('ul');
$ul.find('a').removeClass('active');
$this.addClass('active');
});
</script>
Below is the html-code that is being displayed and hidden:
<ul class="tabs">
<li><a class="active" href="javascript:void(0);" data-url="#content1">Content1</a></li>
<li>Content2</li>
<li>Content3</li>
</ul>
<section id="content1">
Some content 1
</section>
<section id="content2">
Some content 2
</section>
<section id="content3">
Some content 3
</section>
Below is the CSS code:
section {
display: none;
}
section:first-of-type {
display: block;
}
ul.tabs {
list-style: none;
text-align: center;
}
ul.tabs li {
display: inline-block;
}
ul.tabs li a {
display: inline-block;
width: 100px;
margin-right: 25px;
margin-bottom: 25px;
padding: 5px 5px 5px 5px;
background-color: #ffffff;
border: 1px;
border-style: solid;
border-color: #000000;
text-align: center;
text-decoration: none;
color: #000000;
}
ul.tabs li a:hover {
color: #349cf0;
}
ul.tabs li a.active {
color: #349cf0;
}
I have no idea why this suddenly stopped working. Now I have not included all the stuff thats on the website. Can anyone of you perhaps explain to me what could possibly be interfering with the code? Maybe I accidentally changed something in the js. I received the code from someone else and am not able to spot any errors myself. I would very much appreciate if anyone here will be able to spot any errors!
Thanks in advance
Looks like it is working: http://jsfiddle.net/L0Lnav2t/1/
<script type="text/javascript">
$('.tabs').on('click', 'a', function(){
$('section').hide();
$($(this).attr('data-url')).show();
var $this = $(this),
$ul = $this.parents('ul');
$ul.find('a').removeClass('active');
$this.addClass('active');
});
</script>
I assume your code causes another error before the onclick listener is initialized, rendering it dysfunctional.
On its own it seems to be fine though
I don't probably know how to search for this precise question and I haven't found anything, so I am sorry if there is already asked somewhere.
I only have 3 buttons and the index is the "Inicio" page. I've applied a :hover to the buttons, but I want to keep it fixed for the button of the displayed page. Obviously, I want to have "Inicio" in this state at the beginning.
(jsfiddle below)
<!-- menu -->
<nav id="nav">
<ul>
<a id=inicio href=#><li class="boton"><p class="text_menu">INICIO</p></li></a>
<a id=productos href=#><li class="boton"><p class="text_menu">PRODUCTOS</p></li></a>
<a id=contacto href=#><li class="boton"><p class="text_menu">CONTACTO</p></li></a>
</ul>
</nav>
#nav {
padding-top: 27px;
padding-left: 25%;
}
#nav ul li {
list-style:none;
display:inline-block;
margin-left: 4%;
text-align: center;
font-family: 'Dosis', sans-serif;
font-size: 100%;
color: #FFF;
}
.text_menu {
padding-top: 5px;
}
.boton {
width: 15%;
height: 57px;
background-color: #0099ff;
border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-radius: 10px 10px 0px 0px;
border: 0px solid #000000;
}
.boton:hover {
background-color: #0033ff;
}
Here is a jsfiddle:
http://jsfiddle.net/7jbUj/
Thanks for your responses.
U can simply add class like .hovered to current button like
HTML:
<li class="boton hovered"><p class="text_menu">CONTACTO</p></li></a>
CSS:
.hovered {
background-color: #0033ff;
}
UPD: Fiddle
UPD2: For page changing
U simply can add and remove class on `click' like:
$('nav ul a').on('click', function(){
$('nav ul a li.hovered').removeClass('hovered');
$(this).children('li').addClass('hovered');
})
Fiddle2
If you want to use without JQuery, you have to use it in javascript
HTML :
<a id="mnu1" class="mnu hovered" src="#" onclick="makeSelected('mnu1')"> One </a>
<a id="mnu2" class="mnu" src="#" onclick="makeSelected('mnu2')"> Two </a>
<a id="mnu3" class="mnu" src="#" onclick="makeSelected('mnu3')"> Three </a>
CSS :
.mnu{
background-color : #451;
margin-left:20px;
font-size:30px;
}
a:hover{
background-color:#ccc;
}
.hovered{
background-color:#ccc;
}
JS :
var prev_mnuid= "mnu1";
function makeSelected(mnuid){
document.getElementById(prev_mnuid).className = "mnu";
document.getElementById(mnuid).className = "mnu hovered";
prev_mnuid=mnuid;
}
Fiddle : http://jsfiddle.net/rajaveld/t31zc8jx/
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
So I have this piece of HTML which represents the menu itself:
<div id="menu">
<ul class="pnav">
<li>Home</li>
<li>
About GM
<ul class="cnav">
<li>Team</li>
<li>Events</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</li>
<li>Tournaments</li>
<li>Membership</li>
</ul>
</div>
I also have this piece of CSS for this menu:
ul.pnav {
list-style: none;
padding: 0 20px;
margin: 0;
width: 920px;
background: #222;
font-size: 1.2em;
background: url(topnav_bg.gif) repeat-x;
}
ul.pnav li {
display:inline;
margin: 0;
padding: 0 15px 0 0;
position: relative;
}
ul.pnav li a{
padding: 10px 5px;
color: #fff;
text-decoration: none;
}
ul.pnav li a:hover{
background: url(topnav_hover.gif) no-repeat center top;
}
ul.pnav li ul.cnav {
list-style: none;
position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
width: 170px;
border: 1px solid #111;
}
ul.pnav li ul.cnav li{
display:block;
margin: 0; padding: 0;
border-top: 1px solid #252525;
border-bottom: 1px solid #444;
clear: both;
width: 170px;
}
And I have this JS:
$(document).ready(function(){
//$("ul.cnav").parent().append("<span></span>");
$("ul.pnav li").click(function() {
$(this).parent().find("ul.cnav").slideDown('fast').show();
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.cnav").slideUp('slow');
});
});
});
which I didn't quite wrote myself,only customized it and which is called like this in the HEAD HTML tag :
<script src="js/dropdown.js"></script>
but the dropdown isn't working,can any1 help me and explain some solution to me?:D
Add:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" ></script>
before the above - Tag in case you missed to include jQuery.
I suspect that you've simply forgotten to load jQuery.
Also, I made 1 slight change to your script to make the menu only open its child subnav.
This:
$("ul.pnav li").click(function() {
Became:
$("ul.pnav li a").click(function() {
As it seemed to fit better with the line below it.
Live example: http://jsfiddle.net/DnGRm/
before including any js file you should include 'jquery.js' file which you can download form here http://jquery.com/download/