Develop Reference

Adding a class to body when a Hyperlink tag is clicked which is in the child ul of li tag using jquery

I want to add a class to body when a link is clicked. This is easily done when the link is in the parent ul, but my problem is that i want to do that for the the link present in the child ul of parent li. Whenever I try to do this It has no effect.
What I am trying to do is as given below:
Script:
<script>
$(document).ready(function () {
$("ul.treeview-menu").find("a.links").click(function () {
$("body").addClass("sidebar-collapse");
});
});
</script>
<ul class="sidebar-menu nav nav-list" id="dashboard-menu">
<li class="treeview">
<a rel="tooltip" data-placement="right" target="_self" href="">
<span class="caption">Parent Link</span>
</a>
<ul class="treeview-menu">
<li>
child link
</li>
</ul>
</li>
<ul>
Thank you in advance.

Try with on('click',...), may be your Navigation will generate dynamically after load page so you have to use delegated event binding
$(document).ready(function () {
$(document).on('click','ul.treeview-menu a.links',function () {
$("body").addClass("sidebar-collapse");
});
});
<ul class="sidebar-menu nav nav-list" id="dashboard-menu">
<li class="treeview">
<a rel="tooltip" data-placement="right" target="_self" href="">
<span class="caption">Parent Link</span>
</a>
<ul class="treeview-menu">
<li>
child link
</li>
</ul>
</li>
<ul>

you have two issues:
1- this line //}); it was commented and was preventing your code from working.
2-when the hyperlink is clicked it refreshes the page and thus any class you've added to your previous html has been erased that's why you want be able to see any change.
try this:
<script>
$(document).ready(function () {
$("ul.treeview-menu").find("a.links").click(function (e) {
e.preventDefault()
$("body").addClass("sidebar-collapse");
});
});
</script>
<ul class="sidebar-menu nav nav-list" id="dashboard-menu">
<li class="treeview">
<a rel="tooltip" data-placement="right" target="_self" href="">
<span class="caption">Parent Link</span>
</a>
<ul class="treeview-menu">
<li>
child link
</li>
</ul>
</li>
<ul>

$(document).ready(function () {
$("ul.treeview-menu").find("a.links").click(function (e) {
e.preventDefault()
$("body").addClass("Enter your class name");
});
});

How to prevent auto scrolling when click tab

I'm working on a project and stuck on the tabs. No matter what I do the page scrolling down when I click a tab. This is my HTML:
<ul class="list">
<li class="tab1 active">
<i class="fa fa-external-link"></i>
Quick Reports
</li>
<li class="tab1">
<i class="fa fa-star-o"></i>
My Folders
</li>
<li class="tab1">
<i class="fa fa-folder-open-o"></i>
My Team Folders
</li>
<li class="tab1">
<i class="fa fa-files-o"></i>
Public Folders
</li>
</ul>
var open_tab = function() {
$('.tab1').each(function (i, tab) {
UTILS.addEvent(tab, 'click', function() {
$('.list li.active').removeClass('active');
$(this).addClass('active');
$('.active-panel').removeClass('active-panel');
var target_panel_selector = $(this).find('a').attr('href');
$(target_panel_selector).addClass('active-panel');
window.location.hash = target_panel_selector ;
});
});
};
And the style of .active-panel is display: block. I tried to use:
e.preventDefault();
or
tab.find('a').on('click', function(e){
alert("finally!!");
e.preventDefault();
});
and other stuff I found on the web but nope, not working.

<ul class="list">
<li class="tab1 active">
<i class="fa fa-external-link"></i>
<a data-href="#quick-reports" class="tab" href="javascript:void(0)">Quick Reports</a>
</li>
<li class="tab1">
<i class="fa fa-star-o"></i>
<a data-href="#my-folders" class="tab" href="javascript:void(0)">My Folders</a>
</li>
<li class="tab1">
<i class="fa fa-folder-open-o"></i>
<a data-href="#my-team-folders" class="tab" href="javascript:void(0)">My Team Folders</a>
</li>
<li class="tab1">
<i class="fa fa-files-o"></i>
<a data-href="#public-folders" class="tab" href="javascript:void(0)">Public Folders</a>
</li>
</ul>
<script>
function maketabActive($strElement)
{
$('.list li.active').removeClass('active');
$strElement.addClass('active');
$('.active-panel').removeClass('active-panel');
var target_panel_selector = $strElement.find('a').data('href');
$(target_panel_selector).addClass('active-panel');
// Save selected tab index in session stroage.So after page refresh active tab will be maintained
sessionStorage.setItem('selected-tab', $strElement.index());
}
$(document).ready(function () {
// Check if selected tab is stored in session stroage
if (sessionStorage.getItem('selected-tab'))
{
//Make tab active based on index got from session stroage
maketabActive($(".tab1:eq(" + sessionStorage.getItem('selected-tab') + ")"));
}
});
var open_tab = function () {
$('.tab1').each(function (i, tab) {
UTILS.addEvent(tab, 'click', function () {
maketabActive($(this));
});
});
};
</script>

I think that it's scrolling when you are setting the hash here
window.location.hash = target_panel_selector ;
Take a look at: https://stackoverflow.com/a/14690177/5612557

UPDATE
Try to add a return false into the click event and as suggest Diego change the hash method (but work only in a newer browser) like this:
var open_tab = function() {
$('.tab1').each(function (i, tab) {
UTILS.addEvent(tab, 'click', function() {
$('.list li.active').removeClass('active');
$(this).addClass('active');
$('.active-panel').removeClass('active-panel');
var target_panel_selector = $(this).find('a').attr('href');
$(target_panel_selector).addClass('active-panel');
//window.location.hash = target_panel_selector ;
if(history.pushState) {
history.pushState(null, null, target_panel_selector);
} else {
window.location.hash = target_panel_selector;
}
return false; // <-- add this line
});
});
};

You may try
event.stopPropagation();

jQuery - using the same function (ToggleNav/Dropdown) on multiple ID's

I'm trying to make multiple dropdown menu's on my website and I am using this jQuery for this:
$(function() {
var pull = $('#pull');
menu = $('#nav');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
});
Here's the html part:
<nav class="container">
<a href="#" id="pull" style="display:block;">
<h3>Menu</h3>
</a>
<ul id="nav" style="display:none;">
<li>Pizza</li>
<li>Pasta</li>
<li>Burger</li>
<li>Specials</li>
<li>Drinks</li>
</ul>
</nav>
It works wonderful if I only have one drop down menu but as soon as I add another one, only one of them (doesn't matter if it's two, three or more then) is actually dropping down.
I gave every Menu it's own ID and copied the code every time and replaced the ID's but this doesn't work.
Already looked into this (using the same function of different events ) or this (Jquery - use the same function for multiple requests) and other threads but i can't figure out how to apply this on my code...
Here's my Jsfiddle on what I'm trying to do: https://jsfiddle.net/thwdyccr/2/

Use classes instead of ids, and then you can make the same code work for all cases (fiddle):
$(function () {
var pull = $('.pull');
$(pull).on('click', function (e) {
e.preventDefault();
var menu = $(this).next();
menu.slideToggle();
});
});
<nav class="container"> <a href="#" class="pull" style="display:block;">
<h3>Menu1</h3>
</a>
<ul class="nav" style="display:none;">
<li>Pizza
</li>
<li>Pasta
</li>
<li>Burger
</li>
<li>Specials
</li>
<li>Drinks
</li>
</ul>
</nav>
<nav class="container"> <a href="#" class="pull" style="display:block;">
<h3>Menu2</h3>
</a>
<ul class="nav" style="display:none;">
<li>Pizza
</li>
<li>Pasta
</li>
<li>Burger
</li>
<li>Specials
</li>
<li>Drinks
</li>
</ul>
</nav>

Try this:
https://jsfiddle.net/thwdyccr/5/
Rather than using IDs - consider using a class instead - this'll save you lots of duplication in your code (as essentially it's all doing the same thing).
You can specify the target selector (e.g. the element you want to show) by traversing your structure with .parent() .children() or .find()
If you're wondering why I am storing $(this) in var element - it is because the browser has to figure out what $(this) is each time you use it - so it's good practice to store it in a variable.
HTML
<nav class="container">
<a href="#" class="pull" style="display:block;">
<h3>Menu1</h3>
</a>
<ul class="nav" style="display:none;">
<li>Bear</li>
<li>Pasta</li>
<li>Burger</li>
<li>Specials</li>
<li>Drinks</li>
</ul>
</nav>
<nav class="container">
<a href="#" class="pull" style="display:block;">
<h3>Menu2</h3>
</a>
<ul class="nav" style="display:none;">
<li>Fish</li>
<li>Pasta</li>
<li>Burger</li>
<li>Specials</li>
<li>Drinks</li>
</ul>
</nav>
JS
$(function() {
$(".pull").click(function(e) {
e.preventDefault();
var element = $(this);
element.parent('nav.container').children("ul.nav").slideToggle();
});
});

You shouldn't use id's for pull. Here's an updated fiddle https://jsfiddle.net/thwdyccr/2/.

Try utilizing Attribute Starts With Selector [name^="value"] [id^=pull] , e.target.parentElement.nextElementSibling to select next ul to call .slideToggle() on
$(function() {
var pull = $("[id^=pull]")
, menu = $("[id^=nav]")
, menuHeight = menu.height();
pull.on("click", function(e) {
e.preventDefault();
$(e.target.parentElement.nextElementSibling).slideToggle();
});
});
jsfiddle https://jsfiddle.net/wpvok7gy/1/

Show the content based on link click. And hide previously selected

I want to show the content based on link click. and hide the content which was previously selected.
Any way to do it?
Note : I dont want to change the markup.
Here is jsFiddle
html:
<ul class="nav nav-stacked" id="nav-stacked">
<li class="active"><i class="fa fa-dashboard fa-fw"></i>Dashboard
</li>
<li id="vollist-container" class="menu open"><i class="fa fa-sort-alpha-asc fa-fw"></i>Volumes<i class="caret"></i>
<ul id="vol-list" class="submenu">
<li> <a href="javascript:void(0);" onclick="show_content('vol1', this)">
<span>vol1</span>
</a>
</li>
<li> <a href="javascript:void(0);" onclick="show_content('vol2', this)">
<span>vol2</span>
</a>
</li>
</ul>
</li>
</ul>
<div id="content">
<div id="dashboard" class='show'>dashboard</div>
<div id="volumes">
<div id="vol1" class="hide">vol 1</div>
<div id="vol2" class="hide">vol 2</div>
</div>
</div>
jQuery:
function show_content(id, element) {
var children = $("#content").children();
children.filter(function () {
return $(this).css('display') == 'block';
}).hide();
$("#" + id).parent().css('display') == 'none' ? $("#" + id).parent().show() : null;
$("#" + id).toggleClass('hide');
}

This function does what you need:
function show_content(id, element) {
$('#content > div').hide();
$('#' + id).show();
}
Notes:
You do not need the .show and .hide CSS classes
You still need to hide all the content divs on page load either via CSS or via jQuery.
The element parameter is not necessary.
jQuery offers more elegant ways to solve this problem, but the function above should answer your question.

<script>
function showSomething()
{
$("#div1").hide();
$("#div2").show();
</script>
Around your div:
<a href="Javascript:showSomething();">
<div></div>
</a>

getting content of <li> when it is clicked

I have a list. And am trying to get the context of the list when the user clicks the text using prototype. But this code doesn't not alert the message. What is the wrong with the code?
The code can be seen here:
www.modernarapca.com/test.php
JavaScript:
$$('ul#myList2 li').each(function(elmt) {
elmt.observe('click', function(ev) {
var tab;
tab = elmt.down('a').readAttribute('href');
alert("entered");
});
});
Markup:
<ul id="myList2">
<li>
<a href="javascript:;" class="" >text1</a>
</li>
<li>
<a href="javascript:;" class="" >text2</a>
</li>
<li>
<a href="javascript:;" class="" >text3</a>
</li>
</ul>

Or maybe this one...
$('document').ready(function() {
$('#myList2 li').on('click', function(el) {
console.log(el.target);
var cont = $(el.target).html();
alert(cont);
});
});