Develop Reference

Open dropdown on span click

I need to open a submenu, clicking on the parent element. I could do it this way
$(function(){
$('li.dropdown > a').on('click',function(event){
event.preventDefault();
$(this).toggleClass('selected');
$(this).parent().find('ul').first().toggle(300);
$(this).parent().siblings().find('ul').hide(200);
//Hide menu when clicked outside
$(this).parent().find('ul').parent().mouseleave(function(){
var thisUI = $(this);
$('html').click(function(){
thisUI.children(".dropdown-menu").hide();
thisUI.children("a").removeClass('selected');
$('html').unbind('click');
});
});
});
});
But, sometimes I have an actual link as a parent element. And I'd want to go to that link on click. And open the dropdown otherwise. Tried with a click on dropdown:before/ dropdown:after pseudoelements with no luck. And I can't manage to do it adding a span inside dropdown div.
Thank you for any help.
LE: My HTML structure looks like this
<nav id="main-nav">
<ul>
<li>Home</li>
<li class="dropdown">Main Cat
<ul class="dropdown-menu">
<li>Sub Cat1</li>
<li>Sub Cat2</li>
<li>Sub Cat3</li>
</ul>
</li>
<li>Second Cat</li>
</ul>
</nav>

Display active tab's name in an span

I would like to show the active tab's name (text) in a span .active-class.
Example:
<ul class="tabs">
<li class="feinleinen active">feinleinen</li>
<li class="glatt">glatt</li>
</ul >
<span class="active-class">*Active_Tab_Name_Here (i.e. feinleinen) *</span>

What you want is either to have a click event each time a link is clicked and put the text in there?
Javascript:
function changeSpan(var newText){
document.getElementByClassName('active-class').innterHTML(newText);
}
When the above you need to initialise the function. this can be done in the anchor within the list item.
<li><a href='#' onclick='changeSpan("new item name!");'>
Don't forget the hash (#) within the href! This stops the default action, in layman's terms.
With jQuery this can be a bit simpler
$('a','ul.tabs>li').click(function(){//a classname would be a better selector
$('.active-class').appendTo($(this).innerHTML());//can also use $(this).text();
return false;//also stops default action
});

FIDDLE:
HTML
<ul class="tabs">
<li class="feinleinen active">feinleinen
</li>
<li class="glatt">glatt
</li>
</ul>
<span class="active-class">active tab name here</span>
SCRIPT
$('.active-class').text($('.tabs .active').find('a').text());
I guess you want this on click , therefore bit updation to my above code here :-
$('.tabs a').click(function () {
$('.tabs li').removeClass('active');
$(this).parent('li').addClass('active');
$('.active-class').text($(this).text());
});

fiddle: http://jsfiddle.net/x97g8sc7/
$(".active-class").text($(".tabs .active").text());

how to active parent ul li after page refresh or click on sub menu link

how do i keep selected tab active after page reload or refresh i have working on drop line navigation menu
function is working fine for parent ul li and also parent active when click on parent link
but problem is that when i click on sub menu link and redirect to another page then clicked parent ul li didn't active and every-time Home Tab active or highlight whenever page refresh or redirect to another page
for example i want like this
Account Menu is parent menu and child menu like user profile and user accounts
when i click user profile or user accounts script should active or highlight
Account Menu Tab Not Home Tab
Here Javascript
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function () {
$("li:first-child").addClass("active");
$('li').click(function () {
$('.secondary li').removeClass('active');
$(this).addClass('active');
});
})
});//]]>
</script>
Html Code
<div role="navigation" id="navPrimary">
<ul class="secondary">
<li >Home</li>
<li>Account Menu
<ul>
<li>OVERVIEW</li>
<li>EDIT PROFILE</li>
<li>MANAGE EMAILS</li>
<li>EDIT PASSWORD</li>
<li>CREDIT CARDS</li>
<li>BANK ACCOUNTS</li>
<li>CLOSE ACCOUNT</li>
<li>LOGOUT</li>
</ul>
</li>
<li>Payments Menu
<ul>
<li>OVERVIEW</li>
<li>EDIT PROFILE</li>
<li>MANAGE EMAILS</li>
<li>EDIT PASSWORD</li>
<li>CREDIT CARDS</li>
<li>BANK ACCOUNTS</li>
<li>CLOSE ACCOUNT</li>
<li>LOGOUT</li>
</ul>
</li>
<li>Request Money
<ul>
<li>Manage Invoices</li>
<li><a href="" >Request Money</a></li>
<li><a href="" >Create Invoice</a></li>
<li><a href="" >Invoice Settings</a></li>
</ul>
</li>
<li><a href="#" >Merchant Services</a></li>
<li><a href="#" >Products & Services</a></li>
</ul>
</div>
Updated Javascript but not working
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
$(document).ready(function () {
var index = Cookies.get('active');
$('.secondary').find('a').removeClass('active');
$(".secondary").find('a').eq(index).addClass('active');
$('.secondary').on('click', 'li a', function (e) {
e.preventDefault();
$('.secondary').find('a').removeClass('active');
$(this).addClass('active');
Cookies.set('active', $('.clearfix a').index(this));
});
});
}//]]>
</script>

You will definitely store somewhere the data, wich was the last active tab. If you want to do this on client side only, one solution can be the cookies. See here: How do I set/unset cookie with jQuery?
If you are using HTML5, then you can use web storage. See here.
If you are rendering your page by PHP, you can use $_SESSION variable for this. When user clicks a tab, you make an ajax request, and store the value of the active tab in a $_SESSION variable, but as i see, you want to do it on the client side.
UPDATE
Ok, i just created it for you.
First thing is to set an id for every a element in my example, to know, wich is that. You can do it some other way, but now this is the most simple.
Second is to download the jquery.cookie.js, and do not use the URL, store it locally.
Third, here could be a problem, if cookies are disabled on the client machine.
You need to do something like this:
HTML
<div role="navigation" id="navPrimary">
<ul class="secondary">
<li>Home</li>
<li>Account Menu
<ul>
<li>OVERVIEW</li>
</ul>
</li>
</ul>
</div>
CSS
.active {font-weight: bold; color: #F00}
JQUERY
ok, stacoverflow does not allow me to paste here a code but i loaded here the
https://raw.githubusercontent.com/carhartl/jquery-cookie/master/src/jquery.cookie.js script also!
<script type='text/javascript'>
$(function() {
//$.removeCookie("active");
var activeMenu = $.cookie("active");
console.log(activeMenu);
if (typeof activeMenu === 'undefined') {
$("#home").addClass("active");
} else {
$('#' + activeMenu).addClass('active');
}
$('li a').click(function(e) {
e.preventDefault();
var listItems = $("#navPrimary li a");
listItems.each(function(idx, li) {
$(li).removeClass('active');
});
$(this).addClass('active');
var id = $(this).attr('id');
$.cookie("active", id);
});
})
</script>

Disable links from auto created drop-down menu js

Fixed:
So I got this piece of javascript that will show an drop-down menu when the browser is small enough (done with some #media). The menu is created automatically based on the menu for bigger screen sizes. Now my issue is that it also creates links from "Something1" and "Something2".
I would like these to be shown but disables, so not clickable.
JSFiddle
FIX: The only thing what had to be added so that it didn't linked "Something1/2" to non-exsisting pages was :
HTML
<div class="nav">
<nav>
<ul>
<li>Actual Link
</li>
<li> Something1
<ul>
<li>Actual Link
</li>
<li>Actual Link
</li>
</ul>
<li>Something2
<ul>
<li>Actual Link
</li>
<li>Actual Link
</li>
<li>Actual Link
</li>
<li>Actual Link
</li>
</ul>
</li>
<li>Actual Link
</li>
</ul>
</nav>
</div>
JS
// Create the dropdown base
$("<select />").appendTo("nav");
// Create default option "Go to..."
$("<option />", {
"selected": "selected",
"value": "",
"text": "Go to..."
}).appendTo("nav select");
// Populate dropdown with menu items
$("nav a").each(function () {
var el = $(this);
$("<option />", {
"value": el.attr("href"),
"text": el.text()
}).appendTo("nav select");
});
$("nav select").change(function () {
window.location = $(this).find("option:selected").val();
});
Is there any way to accomplish this?

The easiest way to create a blank link would be as followed,
or
I'm not sure which is the best option but I recently started to use the second option. When you use the first option it will add the # symbol to the end of your url which can mess up active nav links.

Can't get tabs to work in HTML & JavaScript

I'm not a JavaScript person so I'm having a little difficulty with what I'm trying to do. We have a html page that is supposed to display "tabs" for 3 different details of our product: Description, Details, and Returns. I can get the tabs to display correctly but the JavaScript isn't changing to the tab when I click on the tab header.
Here's my html, pretty basic:
<html>
<head>
<link rel="stylesheet" href="skeleton.css">
<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<br><br><br>
<ul class="sans tabs">
<li>
<a class="active" href="#tabinfo" style="fonrt-weight:normal">Description</a>
</li>
<li>
Details
</li>
<li>
Delivery & Returns
</li>
</ul>
<ul class="tabs-content">
<li class="active" id="tabinfo">
<p>A description of the product would go here. A description of the product would go here. A description of the product would go here.
A description of the product would go here. A description of the product would go here. A description of the product would go here. A description of the product would go here.</p>
</li>
<li id="tabdetails">
<ul>
<li>Detail #1</li>
<li>Detail #2</li>
<li>Detail #3</li>
<li>Detail #4</li>
<li>Detail #5</li>
<li>etc.</li>
</ul>
</li>
<li id="returns">
<p>Details about returning a product would go here.</p>
<p>Details about returning a product would go here.</p>
<p>See Delivery & Returns for more information.</p>
</li>
</ul>
<script src="tabs.js"></script>
</body>
</html>
and of course, the tabs.js file:
$('body').on('click', 'ul.tabs > li > a', function(e) {
//Get Location of tab's content
var contentLocation = $(this).attr('href');
//Let go if not a hashed one
if(contentLocation.charAt(0)=="#") {
e.preventDefault();
//Make Tab Active
$(this).parent().siblings().children('a').removeClass('active');
$(this).addClass('active');
//Show Tab Content & add active class
$(contentLocation).show().addClass('active').siblings().hide().removeClass('active');
}
});
Again, I don't know a whole lot about js so I'm sure it's something to do with that but right now I'm stuck and can't figure it out.

You need to wrap your statement in a ready statement.. i.e
$(document).ready(function(e) {
$('body').on('click', 'ul.tabs > li > a', function(e) {
//Get Location of tab's content
var contentLocation = $(this).attr('href');
//Let go if not a hashed one
if(contentLocation.charAt(0)=="#") {
e.preventDefault();
//Make Tab Active
$(this).parent().siblings().children('a').removeClass('active');
$(this).addClass('active');
//Show Tab Content & add active class
$(contentLocation).show().addClass('active').siblings().hide().removeClass('active');
}
});
});
This could be neatened up as well:
$('body').on('click', 'ul.tabs > li > a', function(e) {
could become
$('.tabs').on('click', 'a', function(e) {

Try using this jquery ui tabs. you will find all the code you need and an explanation on how to apply it in the link provided

You need to add the Click handler on the Tab headers, instead of on the body
$("body ul.tabs li").click(function() {
// the function goes here.
});
This is assuming that you're using jQuery. If you're not already using it, you should add this under the head section.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" />