Develop Reference

Add/Remove class based on URL slug

I'm bulding a hero section that consists of four horizontal accordion items, they expand when user clicks one of them.
One element is active on page load, because I pre-styled it with class "active".
I have code, that removes active class from an active element and sets the active class to the one that's been clicked.
The code looks like this:
<script>
$(".tabs_link").on("click", function () {
$(".tabs_link, .tabs_content").removeClass("active");
$(this).addClass("active");
$(this).next(".tabs_content").addClass("active");
});
</script>
The issue with code above is that it only works while users interact with the element, and I need those elements to open/close based on anchors in the link.
I have four anchors, I'd like them to open specific accordion by adding class "active" to the proper element.
The anchors:
#recover
#active
#mother
#kids
each one of .tabs_link and .tabs_content have combo classes so I could set the anchor to the specific child item f.e. .tabs_link.is-blue
Basically i have 4 url scenarios and i need the function to remove active class and set it on each element:
I was thinking to make a template and copy&paste it a couple of times.
f.e.
if(window.location.href.indexOf("#mother") {
$(".tabs_link, .tabs_content").removeClass("active");
$(this).addClass("active");
*// I don't know how to declare to what should I add class,
$(this).next(".tabs_content").addClass("active");
Heres the link to the website if you want to check it out and get to know the case better.
[https://fysioo.webflow.io/][1]

You can just use location.hash to add the class to the desired a tag.
Something like this:
function showContent() {
$(".tabs_link, .tabs_content").removeClass("active");
const aTag = $(`.tabs_link[href="${location.hash}"]`);
aTag.addClass('active');
aTag.next('.tabs_content').addClass('active');
}
showContent(); // on page load

Change current li class (the one who is clicked)

I have many li(list) items which are generated by a loop thanks to java servlets, now
I want to change the class of the current li(list) which is selected
$('li.doBlokkeer').click(function(e) {
$('.doBlokkeer').addClass('doDEBlokkeer').removeClass('doBlokkeer');
});
so if a current li is selected its class need to be changed (it needs to have doDEBlokkeer).
The above code works.. but it changes ALL my li items... so guys do you know how to change the class of the current item $(this) ? I have no jquery skill, pls help me out. Thanks!!

You need to use $(this) instead of $('.doBlokkeer') in the click event handler. As $('.doBlokkeer') will return all the elements having class doBlokkeer where as $(this) represents the jQuery object that is source of the event.
Live Demo
$('li.doBlokkeer').click(function(e) {
$(this).addClass('doDEBlokkeer').removeClass('doBlokkeer');
});
You can also try using toggleClass to switch between two classes.
Live Demmo
$('li.doBlokkeer').click(function(e) {
$(this).toggleClass('doDEBlokkeer');
});

How correct create dynamiclly select with horizontal orientation?

I want danamically create select element in horizontal block. And have funny result. What is the correct way?
JSFiddle

You need to define where you want to append the new elements. For this, use .after(). And then you need to apply styles on the generated/modified controlgroup.
Demo here: http://jsfiddle.net/Palestinian/rKGtQ/
Code:
// append select menu after Button div
$("#Button_show_filters").after('<select id="sm"><option>Opt 1</option><option>Opt 2</option></select>');
// apply styles on select menu
$("#sm").selectmenu();
// add options to controlgroup
$( "#test" ).controlgroup( "option", "corners", true );
// create controlgroup
$( "#test" ).controlgroup().trigger('create');
controlgroup div ID is #test.

I think the main problem is that every time the "Push me!!" button is pressed, you are appending a select element with an id attribute of sm. Having multiple elements with the same id is invalid HTML and can cause problems with Javascript. See this question.
Namely, the $("#sm") line doesn't know which select you are trying to target.
Maybe you should try something like this:
$("button").click(function () {
$("#div_for_harakteristikinomenklatury_list").append('<select><option>Opt 1</option><option>Opt 2</option></select>');
$("#div_for_harakteristikinomenklatury_list select:last").selectmenu();
});
Also, you should get rid of the onclick attribute for the button. You don't need it. Passing the click handler to the click function should make the function run when the button is clicked.

Instead of using id you should use class and apply selctmenu only on last appended select element. Check this fiddle
$("button").click(function show_filters() {
//alert("Hello");
$("#div_for_harakteristikinomenklatury_list").append('<select class="sm"><option>Opt 1</option><option>Opt 2</option></select>');
$(".sm:last").selectmenu();
})
Updated Fiddle

change the $("#sm").selectmenu(); to $("select").selectmenu();
With above mentioned method no matter what is the id or class of the element you newly pushed, it'll get the styles applied.
Check the live fiddle here http://jsfiddle.net/mayooresan/VMj4U/6/

getting individual atrributes while selecting a class with JQuery

I'm new to javascript and JQuery, and I'm working in a small project with JSP.
I create a grid dynamically with JSP and I added some buttons wich class is "select" and in the alt attribute I set the current row index. That works perfectly, I'm trying to set the onclick dynamically. This is my code
$('.select').click(function (){
alert($('.select').attr('alt'));
}
I want to each button to show its own index, but that code shows just the first index in each button. I've searched how to do it, but nothing comes out.
Is there a chance to do what I want?

change this line as:
alert($(this).attr('alt'));

When jQuery calls your event handler it sets this to be the DOM element in question, so try this:
$('.select').click(function (){
alert($(this).attr('alt'));
});
If you need to access DOM element properties you can then get them directly, e.g.:
alert( this.id );
this.value = "test";
If you need to use jQuery methods on the element you need to pass it to the jQuery function first, e.g.:
$(this).hide();
$(this).css("color","red").slideDown();

$('.select').click(function (){
alert($(this).attr('alt'));
});
Change
alert($('.select').attr('alt'));
by
alert($(this).attr('alt'));
Now you select the attr alt of the button lauch the event.

Not sure if that's what you're looking for but...
$('.select').click(function() {
$('.select').each(function() {
$(this).attr('value', $(this).attr('alt'));
});
});
This'll have every button "show" the value stored within their alt attribute when you click one button.
By the way, if you're using 1 button per row, you'd probably better go with index().

I have a nav bar that changes the src of an iframe, how can i change the active link color?

My website has a navigation bar that when clicked targets an iframe.
i would like the "active" link color to be changed.
P.S can't use jQuery, only JS and CSS.
my idea was to have an ID named ACTIVE and give the clicked link the ID active, after removing the ID from all the rest.
though i have no idea how its possible to do so.
on the other hand another option is to do the same only using a class called ACTIVE, my problem there is each link has allready a class assigned to id, and i have no idea how to remove one class out of two.

This is a problem best solved using classes. If you can't use jQuery, you can add classes in JavaScript via something like:
document.getElementById("someID").className += " newClass";
Remove a class using regex:
document.getElementById("someID").className = document.getElementById("someID").className.replace(/\bnewClass\b/,'');
If it doesn't make sense to give each link an ID, you can attach a click handler:
onclick="changeColor(this)"
And add the subsequent function:
var activeLink;
function changeColor(elem){
if(activeLink)
activeLink.className = activeLink.className.replace(/\bnewClass\b/,'');
elem.className += " newClass";
activeLink = elem;
}