I'm trying to add an attribute "selected" to a button. It's a group of 5 buttons but I just want one of them to be "selected" according to the page title.
This is what I have: http://jsfiddle.net/M6Ypu/
<ul id="menu">
<li>
<a id="Home" class="selected" href="#">Home</a>
</li>
<li>
<a id="categories" class href="#">Categories</a>
</li>
<li>
<a id="franchise" class href="#">Franchise</a>
</li>
<li>
<a id="about" class href="#">About</a>
</li>
<li>
<a id="contact" class href="#">Contact</a>
</li>
</ul>
Those are in a Master Page for ASP.NET and I want to change the class of the buttons so if I am at categories.aspx the class for a#categories is changed to "selected".
Hope you can help me.
Try something like this:
$(document).ready(function(){
$("ul#menu a").click(function(){
$("ul#menu a").each(function(){
$(this).removeClass('selected');
});
$(this).toggleClass('selected');
});
});
Working fiddle: http://jsfiddle.net/robertrozas/M6Ypu/3/
I could make it work by adding a script to the pages using the Master Page
Home page has this code and the selector changes depending on the page I am:
<script>
$(document).ready(function () {
$('a.selected').removeClass();
$('a#Home').addClass("selected");
});
</script>
Since there were only 5 pages, it was much easier to just add the script to each one of them.
Related
My project is using a simple toggle menu and I need to exclude the last link (#blog) from the click handler doing scroll animations and URL modifications.
Here is HTML:
<nav class="navbar">
<span class="navbar-toggle" id="js-navbar-toggle">
<i class="fas fa-bars"></i>
</span>
<ul class="main-nav" id="js-menu">
<li>
Home
</li>
<li>
About
</li>
<li>
Skillset
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
<li>
<a id="blog" href="#https://anzudev.blogspot.com/" target="_blank" class="nav-links">Blog</a>
</li>
</ul>
</nav>
And here jQuery:
$('nav a[href*="#"]').not("#blog").on("click", function () {
$("html, body").animate({scrollTop: $($(this).attr("href")).offset().top }, 1000);
});
I've added a jQuery click handler to all nav-links to smoothly scroll to that section and modify the URL accordingly. However, I need to exclude the #blog nav-link, since that redirects to an external site. I've tried the following selectors:
- $('nav a[href*="#"]').not("#blog")
- $('nav a[href*="#"]').not(":last")
But upon clicking "#blog" will still attempt to go to myurl.com/#https://anzudev.blogspot.com/ instead of an external link.
I have a simple mockup of my code here on Codepen for testing.
Any advice on what I am doing wrong here? Cheers!
You just have to delete the # from the beginning of the blog link URL:
https://anzudev.blogspot.com/
instead of
#https://anzudev.blogspot.com/
Anything starting with # will be attached to the end of current page URL.
Working edited CodePen: https://codepen.io/liquidmetalrob/pen/gObzvOg?editors=1010
Your href link on your blog should just be:
"https://anzudev.blogspot.com/"
and not
"#https://anzudev.blogspot.com/"
<div class="filter-portfolio pull-right">
<ul>
<li class="always-visible">
****Categories <span class="icon-caret-down"></span>
</li>
<li>
All
</li>
<li>
Fashion
</li>
<li>
Nature
</li>
<li>
Animals
</li>
<li>
Architecture
</li>
</ul>
</div>`
Whenever I click on the **Categories link it is redirecting me to the index.php/#. Can anyone help me find out why it's happening ?
Prevent default click handler:
$('.filter-portfolio a[href="#"]').on('click', function(event) {
event.preventDefault();
});
The # sign scrolls the page to the top when the anchor is clicked, and adds the hash sign to the URL, if you don't want that, just prevent it
$('a[href="#"]').on('click', function(e) {
e.preventDefault()
});
You could also omit the href attribute like this and you would not need any javascript for it.
Like this:
<a data-filter=".all">All</a>
If I setup a Master page to display a header similar to the following
<ul class="nav nav-pills nav-main" id="mainMenu">
<li>
<a class="dropdown-toggle" href="default.aspx">Home</a>
</li>
<li>
About Us
</li>
</ul>
I want to set the element active for the current page the user is on so in html it will look like this if default.aspx is the active page.
<ul class="nav nav-pills nav-main" id="mainMenu">
<li class="dropdown active"> <%--active--%>
<a class="dropdown-toggle" href="default.aspx">Home</a>
</li>
<li>
About Us
</li>
</ul>
The header menu is based on an existing template so is all html with CSS styling and does not contain any asp: controls. I know I can do this in codebehind by setting the attributes but most of the searches I've pulled up say there could be a better way or here's a dirty workaround link1 & link2
What would be the best way(s) of doing this?
First you have to set all li tags as server Controls
<ul class="nav nav-pills nav-main" id="mainMenu">
<li>
<a class="dropdown-toggle" href="default.aspx" runat="server" id="lidefault">Home</a>
</li>
<li>
About Us
</li>
</ul>
do like the above for all li tags
Then in master page load,
string sURL=Request.Url.ToString().ToLower();
if (sURL.Contains("/default.aspx")
lidefault.Attributes.Add("class", "active")
else if (sURL.Contains("/about.aspx")
liabout.Attributes.Add("class", "active")
// do like the above for the rest li tags
You can check it with javascript. Set a foreach loop for check each link of your menu. If your menu url equal the page url, add active class with .addClass() method.
I've got the following html code:
<div id="menuItems" class="hidden">
<ul>
<li><a class="fgMenuItem" href="#">MenuItem #1</a></li>
<li>
<a class="fgMenuItem" href="#">MenuItem #2</a>
<ul>
<li><a class="fgMenuItem" href="#">SubItem #1</a></li>
<li><a class="fgMenuItem" href="#">SubItem #2</a></li>
</ul>
</li>
<li><a class="fgMenuItem" href="#">MenuItem #3</a></li>
<li>
<a class="fgMenuItem" href="#">MenuItem #4</a>
<ul>
<li><a class="fgMenuItem" href="#">SubItem #3</a></li>
<li><a class="fgMenuItem" href="#">SubItem #4</a></li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
$(function() {
$(".fgMenuItem").bind("click",function() {
alert('test');
});
});
</script>
I'm using Filament Group's iPod menu and the menus are working fine, but my jQuery code is not working. I'm trying to make it so that when an item is clicked, it executes my alert('test');.
I suspect the problem may be that Filament Group is overriding my click event handler, but I'm not sure how to fix it. I tried going into their javascript file and changing all the .click(function() { to .bind("click", function() {, but this didn't seem to make any difference. Any suggestions would be great!
Just tested and all working fine for me, you are including jQuery at the top of your document right?
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script>
</head>
$(function() {
$(".fgMenuItem").on("click",function() {
alert('test');
});
});
JSFiddle: http://jsfiddle.net/jv584/
EDIT: If you're able to set up a fiddle or provide more code (working demo page perhaps?) then I'll take another look and see if I can spot the problem
This is my code I want, when I click to link at first redirect to page by link and then change href. The problem is when I click this href change but page don't change
$(window).load(function() {
$("#product").click(function() {
$('#product').attr('href', 'javascript:void(0);');
$('#seller').attr('href', 'http://www.vmarket.com.vn/products.php?os=offer');
$('#buy').attr('href', 'http://www.vmarket.com.vn/products.php?os=seeking');
});
$("#seller").click(function() {
$('#product').attr('href', 'http://www.vmarket.com.vn/products.php');
$('#seller').attr('href', 'javascript:void(0);');
$('#buy').attr('href', 'http://www.vmarket.com.vn/products.php?os=seeking');
});
$("#buy").click(function() {
$('#product').attr('href', 'http://www.vmarket.com.vn/products.php');
$('#seller').attr('href', 'http://www.vmarket.com.vn/products.php?os=offer');
$('#buy').attr('href', 'javascript:void(0);');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="searchTabs">
<li class="current">
<a rel="nofollow" href="products.php" id="product">Sản phẩm</a>
</li>
<li class="tabRight">
<a rel="nofollow" href="products.php?os=offer" id="seller">Cung</a>
</li>
<li>
<a rel="nofollow" href="products.php?os=seeking" id="buy">Cầu</a>
</li>
</ul>
Why do you need to change the href attribute for the link? Why don't you just redirect them straight away using:
window.location.href='/to/infinity/and/beyond';
I think i understand what you're trying to do.
The reason why it does not work is because when you click the links it will then as normal send the user to whatever that's inside the href. Looks like what you're looking for is a method of having the links change dynamically depending on which page you're on? Right?
I would suggest using a server side language to handle that. Using parameters to control what link to show.
For an example:
<ul id="searchTabs">
<li class="current" >
<a rel="nofollow" href="products.php" id="product">Sản phẩm</a>
</li>
<li class="tabRight">
<a rel="nofollow" href="products.php?os=offer" id="seller">Cung</a>
</li>
<li >
<a rel="nofollow" href="products.php?os=seeking" id="buy">Cầu</a>
</li>
</ul>
Would become:
<ul id="searchTabs">
<li class="current" >
<a rel="nofollow" href="products.php?links=1" id="product">Sản phẩm</a>
</li>
<li class="tabRight">
<a rel="nofollow" href="products.php?links=2" id="seller">Cung</a>
</li>
<li >
<a rel="nofollow" href="products.php?links=3" id="buy">Cầu</a>
</li>
</ul>
Then you could with a server side language such as PHP do a switch on the link parameter. Then depending on what is set change the href attributes.
-
Reason why yours isn't working is because it redirect the user. Which means you're JavaScript won't matter at all as none of it have any influence on the other page.
You could prevent it from changing the actual location but it does not sound like that's what you're looking for. But just in case.. In order to prevent such event you can use:
$(window).load(function(){
$("#product").click(function(e){
e.preventDefault();
$('#product').attr('href','javascript:void(0);');
$('#seller').attr('href','http://www.vmarket.com.vn/products.php?os=offer');
$('#buy').attr('href','http://www.vmarket.com.vn/products.php?os=seeking');
});
$("#seller").click(function(e) {
e.preventDefault();
$('#product').attr('href','http://www.vmarket.com.vn/products.php');
$('#seller').attr('href','javascript:void(0);');
$('#buy').attr('href','http://www.vmarket.com.vn/products.php?os=seeking');
});
$("#buy").click(function() {
e.preventDefault();
$('#product').attr('href','http://www.vmarket.com.vn/products.php');
$('#seller').attr('href','http://www.vmarket.com.vn/products.php?os=offer');
$('#buy').attr('href','javascript:void(0);');
});
});
Hope that helps :) Leave a comment if there is anything you would like to explained.