I've tried coding a function that checks if other tabs are active, and if they are it should close them and open another tab, and if not it should just open the tab. I'm new at javascript and tried this but it didn't work.
HTML
<div class="showRatings">
<li role="presentation id="productInfomation" class="active">...</li>
<li role="presentation id="productDiscount">...</li>
<li role="presentation id="productRatings">...</li>
Js Script
$('div.showRatings').click(function(){
if ( document.getElementById('productInfomation').classList.contains('active') ) {
document.getElementById('productInfomation').classList.remove('active');
document.getElementById('productRatings').classList.add('active');
} else if ( document.getElementById('productDiscount').classList.contains('active') ) {
document.getElementById('productDiscount').classList.remove('active');
document.getElementById('productRatings').classList.add('active');
} else {
document.getElementById('productRatings').classList.add('active');
}});
You don't need to write code for each element separately, or even bother to test which tab was previously active. Just remove the "active" class from all of them in one go, and then add it to the element that was clicked:
$('.showRatings li').on("click", function() {
$('.showRatings li.active').removeClass('active');
$(this).addClass('active');
}
Related
I've got bootstrap4 menu like this:
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#introduction">INTRODUKTION <span class="sr-only">(current)</span></a></li>
</ul>
Default scroll spy adds active to nav-link (a) I need to change this, becouse my active should be after nav-item (li). Can I do that ?
You can see this here:
Example
When I click, everything goes ok - but on scroll - active is a href.
By default .active class will be added to only anchor tags.
Try something like this for your requirement
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
$(".navbar-nav .active").removeClass("active").parent().addClass("active");
})
Add attribute data-spy="scroll"
on <div class="container"> the parent of section with id="introduction"
like
<div class="container" data-spy="scroll">
I found solution. I need just to add new event (cssClassChanged) - and working !
(function(){
// Your base, I'm in it!
var originalAddClassMethod = jQuery.fn.addClass;
jQuery.fn.addClass = function(){
// Execute the original method.
var result = originalAddClassMethod.apply( this, arguments );
// trigger a custom event
jQuery(this).trigger('cssClassChanged');
// return the original result
return result;
}
})();
and then
$(".nav-link").bind('cssClassChanged' , function(e) {
$(".nav-item").each( function() {
if( $(this).hasClass("active") == true ) {
$(this).removeClass("active");
}
});
$(this).removeClass("active").parent().addClass("active");
});
I used different anchor tags on my list but it is not working due to the JavaScript file attach to that list. when I remove that JavaScript file it works but I have to included my JavaScript too. Is there a way to used that same JavaScript file with anchor tag working?
function prepareList() {
$('#expList').find('li:has(ul)')
.click(function (event) {
if (this == event.target) {
$(this).toggleClass('expanded');
$(this).children('ul').toggle('medium');
}
return false;
})
.addClass('collapsed')
.children('ul').hide();
$('#expandList')
.unbind('click')
.click(function () {
$('.collapsed').addClass('expanded');
$('.collapsed').children().show('medium');
})
$('#collapseList')
.unbind('click')
.click(function () {
$('.collapsed').removeClass('expanded');
$('.collapsed').children().hide('medium');
})
};
$(document).ready(function () {
prepareList()
});
I also attach jquery-1.4.2.min.js file as well
here is my html code:
<div id="listContainer">
<ul id="expList">
<li>
<p class="exp1">INDUSTRIAL</p>
<ul>
<li>
<p class="exp1">APPARELS</p>
<ul class="italic">
<li>
<a>Coveralls</a>
</li>
<li >
Uniforms
</li>
<li >
Aprons
</li>
<li >
Trousers
</li>
<li >
Kevlar Lined Denim Jeans
</li>
</ul>
</li>
<li>
<p class="exp1">GLOVES</p>
<ul class="italic">
<li >Seamless</li>
<li>Cut & Sewn</li>
<li>Leather</li>
<li>Mechanics</li>
</ul>
</li>
<li>
SLEEVES
</li>
</ul>
</li>
</ul>
</div>
I cannot tell you the reason for the anchor tags not working without seeing the javascript file you have linked to your page.
If you place this after you include your javascript file, your links should be working as normal.
If you have any anchors being created after the page has loaded (dynamic data) you can simply call Links(); to apply the onclick event handlers or you can manually add addEventListener('click',Anchors,false) when creating the anchor tag.
function Links(){
//Get all Anchor elements
var a=document.getElementsByTagName('a');
//Loop through each anchor element found.
for(var i=0; i<a.length; i++){
//Set on click event for the anchor element
a[i].addEventListener('click',Anchors,false);
}
}
function Anchors(){
//Set new window location using the anchor href that triggers this function.
window.location.href=this.href;
}
window.onload=Links;
If you have any questions about the source code above please leave your comment(s) below.
I hope this helps. Happy coding!
You have screwed up tag id in :
$('#expList') // <-- it was #expandList
.unbind('click')
.click(function () {
$('.collapsed').addClass('expanded');
$('.collapsed').children().show('medium');
})
Check out here: https://jsfiddle.net/urahara/u809p5yr/
But it's still foggy to me what you are trying to accomplish, and how. Cheers ;)
I had similar issues with my web page. I post the workaround here in case anyone else is struggling with it.
In my case I've accidentally removed the class name from my javascript code and the function was triggering with every <a> tag in my page!!
The old one:
$("a").on("click", function (e) {
// ... my function ...
});
and the right way:
$(".the-classname").on("click", function (e) {
// ... my function ...
});
In your case I think the return false is preventing the tag from working. Go ahead and delete it and check if it works fine.
Being asked to make an SPA pizza place and running into issues with the show and hide feature. only the home page shows at all times
<nav>
<div>
<ul>
<li>Sicilian Home</li>
<li>Sicilian Menu</li>
<li>Sicilian About</li>
</ul>
</div>
</nav>
$(document).ready(function ()
{
$("navHome").click(function (event) {
$("home").show();
$("menu", "about").hide();
});
$("navMenu").click(function (event) {
$("menu").show();
$("about", "home").hide();
});
$("navAbout").click(function (event) {
$("about").show();
$("home", "menu").hide();
});
}
Your CSS selectors are incorrect. Base on your HTML you need to use id selectors:
$("#navHome").click(function (event) {
$("#home").show();
$("#menu, #about").hide();
});
$("#navMenu").click(function (event) {
$("#menu").show();
$("#about, #home").hide();
});
$("#navAbout").click(function (event) {
$("#about").show();
$("#home, #menu").hide();
});
Also there is a difference: $("menu", "about") means "find menu tag within about tag", while $("#menu, #about") means "find element with id menu and element with id about".
I copied your javascript and html to simulate the issue. I added alert statements in the functions to check if the click event is captured in the first place. But, the alert statements themselves were not coming up.
You need to make following two changes to your script to work:
prefix # with the ID's to capture the click event
a closing ) is missing at the end of the script
Please find below the final script:
$(document).ready(function ()
{
$("#navHome").click(function (event) {
$("home").show();
$("menu", "about").hide();
});
$("#navMenu").click(function (event) {
$("menu").show();
$("about", "home").hide();
});
$("#navAbout").click(function (event) {
$("about").show();
$("home", "menu").hide();
});
}
)
I am using jquery to add the class to active css on "li" and also navigate to an html page.but after page navigates the class disappers on "li". I have tried different ways to resolve this but couldn't get the point.
$(document).ready(function(){
$( '#topList ul li' ).click(function() {
alert($(this).attr('id'));
if($(this).attr('id') == "add") {
document.location.href = 'localhost:8080/add';
$(this).attr('id').addClass("active");
}
});
});
here is the menu list, what I want is when I click on li it should call a page add and also add a class on that li.
html code
<ul class="nav">
<li class="" id="add"></i> Add </li>
<ul>
You need to add class for the li in the page you are calling ie, the page will be rendered when you call localhost:8080/add.
Because in your code setting up of active class wont be called since the localhost:8080/add will start loading in the previous line of code (document.location.href = 'localhost:8080/add';)
If the page to be rendered is static page then, add this code in that page.
$(document).ready(function(){
$('#add').addClass("active");
});
Use the following script on the page where you have menu or the links.
<div id="cssmenu">
<a href="blah blah" > Test page</a>
<a href="blah blah" > Test page</a>
</div>
$(document).ready(function () {
var pageTitle = window.location.pathname.replace(/^.*\/([^/]*)/, "$1");
$('#cssmenu a').each(function () {
if ($(this).attr('href').toLowerCase() == pageTitle.toLocaleLowerCase())
$(this).addClass('active');
});
});
I solved this problem on my website by looking at the URL and deciding which of the navigation elements was best to add.
function showContent(target) {
var e = $('#'+target);
$(".content").hide();
$("#nav li.active").removeClass("active");
$("#nav li[target='"+target+"']").addClass("active");
e.toggle();
ga('send','pageview',window.location.pathname+"#"+target);
}
// this looks at the URL (by the #...) and decides which view is active
// this gets called on ready and if the client hits the link
// (which dynamically loads instead of making a trip for a new page to the server)
$(window).hashchange(function() {
var which=window.location.hash.substring(1);
switch( which) {
default:
which="profile";
case "profile":
case "resume":
case "projects":
case "contact":
showContent( which);
}
});
I am working on a web site. The type of menu that I want to create is one where you click on something in the menu, and a submenu pops up. But then you can also hover over any other menu item and another submenu will come up, hiding the first one you clicked. You can click anywhere to close the submenu.
I hope that was clear enough, and would appreciate any help you can give.
Here's my very, very simple, cheap, brief, ugly, lazy, father-disappointing version. It uses jQuery, and it probably doesn't actually look anything like what you wanted. But it accomplishes (I think) the one important thing: "locking" the sub-menu open until either another one is opened, or the user clicks somewhere else on the page.
The HTML looks like this...
<ul>
<li>
<a class="author" href="#">Menu Item 1</a>
<ul class="books">
<li><a class="book" href="#">Sub-Menu Item 1</a></li>
<li><a class="book" href="#">Sub-Menu Item 2</a></li>
</ul>
</li>
<!-- ... -->
</ul>
...and here's the JavaScript:
(function ($) {
var $current,
closeSubMenu = function () {
if ($current) {
$current.slideUp();
}
},
openSubMenu = function (e) {
var $books = $(this).next();
e.preventDefault();
e.stopPropagation();
if (!$current || $current[0] !== $books[0]) {
closeSubMenu();
$current = $books;
$books.slideDown();
}
};
$(document).click(function (e) {
var $target = $(e.target);
if ($target.hasClass('author')) {
openSubMenu.call(e.target, e);
} else if ($target.hasClass('book')) {
e.preventDefault();
} else {
closeSubMenu();
$current = null;
}
});
$('.books').slideUp();
}(jQuery));
If nothing else, it should help give you some ideas for how you do decide to do it.