Develop Reference

active class menu item on javascript or php

I've menu items code....and I want if I click on menu a it will displaying a page, if I click on menu b it will displaying page b with out page a....
Can anyone show me how to solve this with javascript or php, I'm newbie.... please help..
This is my HTML code
<div class="col-xs-9">
<ul class="menu-items">
<li class="active"></li>
<li>b</li>
</ul>
<div style="width:100%;border-top:1px solid silver">
<p style="padding:15px;">page a</p>
</div>
<div class="attr1" style="width:100%;border-top:1px solid silver">
<p>page b</p>
</div>
</div>

First you need to hide page b,give id's to your div to show/hide via javascript:
<div class="col-xs-9">
<ul class="menu-items">
<li id="showA" class="active"></li>
<li id="showB">b</li>
</ul>
<div id="pageA" style="width:100%;border-top:1px solid silver">
<p style="padding:15px;">
page a
</p>
</div>
<div id="PageB" class="attr1" style="width:100%;border-top:1px solid silver;display:none">
<p>page b</p>
</div>
</div>
Javascript code to show particular page:
<script>
$(document).ready(function() {
$("#showA").click(function() {
$("#pageB).hide();
$("#pageA").show();
});
$("#showB").click(function() {
$("#pageA).hide();
$("#pageB").show();
});
</script>
To set your menu active use following code:
$(".menu-items li").click(function() {
$(".menu-items li").removeClass("active);
$(this).addClass("active");
});

you mean you want to open a new page when you click on list item, so just do this window.open(pass your page url here)
<div class="col-xs-9">
<ul class="menu-items">
<li class="active"></li>
<li>b</li>
</ul>
<div style="width:100%;border-top:1px solid silver">
<p style="padding:15px;">page a</p>
</div>
<div class="attr1" style="width:100%;border-top:1px solid silver">
<p onclick="function(){window.open(pageUrl)}">page b</p>
</div>
</div>

How to make a tab active with a specific URL with JQuery

On my homepage I have a button. That button leads to another page with tabs. How do make one tab active and show it's content whenever that particular button on the homepage is clicked? Is this even possible or must an event take place for this to happen?
if(location.hash) {
$('#tabbedContent').each(function(){
$(this).find("#champion" + location.hash.substr(1)).fadeIn();
});
} else {
$('#tabbedContent').each(function(){
$(this).find(':first-child').fadeIn();
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div class="btnList">
<ul class="btnSet">
<li>
<a class="tab linkSection" href="#annual"><span>Nominate a Champion</span></a>
</li>
<li>
<a class="tab linkSection" href="#pathology"><span>Become a Champion</span></a>
</li>
<li>
<a class="tab double linkSection" href="#workshop"><span>Promote the Program</span></a>
</li>
<li>
<a class="tab double linkSection" href="#champion"><span>Contact a Champion</span></a>
</li>
</ul>
</div><!-- meetings tabbed section -->
<div class="tabbedContent onPage active" id="annual">
<div class="tabbedContent infoPage">
<div class="greyBox column col-50">
<h2>text</h2>
</div>
<div class="column col-50">
<div class="borderBox">
<h2>text</h2>
</div><br>
</div>
</div>
</div>
</div>

This problem can be solved purely with CSS.
Style all the tabs to not be visible by default and then use the CSS :target pseudo-class to style the active tab as you see fit.
/* All tabs use this class by default */
.tab { opacity:0; position:absolute;}
/* The active tab will use this rule. It's important that this selector
is a more specific selector than the default selector, which it is here. */
.tab:target { opacity:1; transition:1.5s;}
<nav>
Tab 1
Tab 2
Tab 3
Tab 4
</nav>
<div id="tab1" class="tab">
<h1>Welcome to Tab 1</h1>
</div>
<div id="tab2" class="tab">
<h1>Welcome to Tab 2</h1>
</div>
<div id="tab3" class="tab">
<h1>Welcome to Tab 3</h1>
</div>
<div id="tab4" class="tab">
<h1>Welcome to Tab 4</h1>
</div>

trying to have a jQuery, javascript, click function which changes an image to the related id

I have a vertically divided page, down the middle. On one side I have a list of restaurants, I would like when/if a name of a restaurant is clicked on, an image of the restaurant and a description appears inside a div that is on the other side of the divided page.
I am trying to do this with jQuery and have it so when there is a click event the id of the name clicked is stored in a variable and then that variable corresponds to a picture which will then be displayed in the div.
I am sure there is simpler way to do this, and I am drawing a blank on this, or if someone could help me in doing it in the way I am trying, it would be greatly appreciated. All insight is welcomed and thank you.
This is new to me. I know i could do it by going through each id and having its own function call but I am trying to be less repetitive and have a function that works for all. thanks
JS CODE :
$('.hover').click( function(){
var iD = $(this).attr(id);
$('.pictureofeats').removeAttr("id");
$('.pictureofeats').attr('id', iD);
});
HTML CODE :
<div class="row drinks brunchpic">
<img src="pics/buffalofood.png" width="200px"/>
<div class="row">
<div class="col-xs-6 lists">
<ul>
<li class="hover" id="coles">Coles</li>
<br>
<li class="hover" id="716">716 (Food and Sports)</li>
<br>
<li class="hover" id="bdb">Big Ditch Brewing</li>
<br>
</ul>
</div>
<div class="col-xs-6 lists">
<ul>
<li class="hover" id="barbill">Bar Bill</li>
<br>
<li class="hover" id="lloyds">Lloyds</li>
<br>
<li class="hover" id="abv">Allen Burger Venture</li>
<br>
</ul>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6" id="foodInfo">
<div class="row">
<div class="pictureofeats" id="foodImg"></div>
</div>
</div>

Store the required classname in the data-id attribute for the restaurant name
and toggle the display for the images keeping the positioned as absolute
JS Fiddle
Structure your HTML as following:
<div class="parent">
<div class="a">
<div class="img1 active">
1
</div>
<div class="img2">
2
</div>
<div class="img3">
3
</div>
</div>
<div class="b">
<div data-id="img1">abc</div>
<div data-id="img2">def</div>
<div data-id="img3">ghi</div>
</div>
</div>
CSS:
.parent {
width: 100%;
}
.a,.b {
display: inline-block;
min-width: 48%;
}
.img1,.img2,.img3 {
position: absolute;
display: none;
}
.active {
display: block;
}
JS:
$('.b div').click(function() {
var x = $(this).data('id');
$('.a div').removeClass('active');
$('div.' + x).addClass('active');
})

try something like this:
<div id="restId" class="row drinks brunchpic"><img src="pics/buffalofood.png" width="200px"/>
<div class="row">
<div class="col-xs-6 lists">
<ul>
<li class="hover" id="coles">Coles</li><br>
<li class="hover" id="716">716 (Food and Sports)</li><br>
<li class="hover" id="bdb">Big Ditch Brewing</li><br>
</ul>
</div>
<div class="col-xs-6 lists">
<ul>
<li class="hover" id="barbill">Bar Bill</li><br>
<li class="hover" id="lloyds">Lloyds</li><br>
<li class="hover" id="abv">Allen Burger Venture</li><br>
</ul>
</div>
</div>
</div>
and in javascript:
$('#restId').click( function(){
$('#restId img').attr('src', newSource);
});
I think this is the logic

Is it possible to simplify jQuery string for toggle?

I have page with more icons and when you click on the icon you can see div where is some content. I would like to know if it is possible to write it somehow more simple then I do. I have 10 icons and I want to have always only one Div opened, so jQuery is quite long and 10 times almost the same.
This is how my jQuery looks like for 1 icon. It is almost the same for rest of them
$(".icon_pl").click(function(){
$("div#show").hide("slow");
$("div#rockz").hide("slow");
$("div#join").hide("slow");
$("div#wedding").hide("slow");
$("div#pl").toggle("slow");
if ($(this).hasClass('icon_active'))
{
$(this).removeClass('icon_active')
} else {
$('.icon_active').removeClass('icon_active');
$(this).toggleClass("icon_active");}
return false;
});
Icons
<div class="iconteiner">
<ul>
<li><span class="icon_pl"></span><h3>Private Lesson</h3></li>
<li><span class="icon_join"></span><h3>Join Us</h3></li>
<li><span class="icon_wedding"></span><h3>Wedding Dance</h3></li>
<li><span class="icon_rockz"></span><h3>ROKCZ Couture</h3></li>
<li><span class="icon_show"></span><h3>Show Dance</h3></li>
</ul>
</div>
Divs with content
<div class="content">
<div id="pl">
<h2>Headlin 1</h2>
<p class="product_description"></p>
</div>
<div id="join">
<h2>Headlin 2</h2>
<p class="product_description"></p>
</div>
<div id="wedding">
<h2>Headline 3</h2>
<p class="product_description"></p>
</div>
<div id="rockz">
<h2>Headline 4</h2>
<p class="product_description"></p>
</div>
<div id="show">
<h2>Headline 5</h2>
<p class="product_description"></p>
</div>
</div>
It works, but I would like to know if it is possible to make it somehow more simple and to write down every id (each div is different with different content, this is why id and not class)
Thank you

How about this. Note the selector is the LI since the span has no content
Actually Can you change the class on the span to ID or DATA attribute so one can always use
$span.attr("id").split("_")[1]; or $span.data("div2show");
$(function() {
$(".iconteiner li").on("click", function() {
$(".content > div").hide("slow");
var $span = $(this).find("span");
var id = $span.attr("class").split("_")[1];
$("#" + id).show("slow");
$span.toggleClass('icon_active');
});
});
$(function() {
$(".iconteiner li").on("click", function() {
$(".content > div").hide("slow");
var $span = $(this).find("span");
var id = $span.attr("class").split("_")[1];
$("#" + id).show("slow");
$span.toggleClass('icon_active');
});
});
.content div {display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="iconteiner">
<ul>
<li><span class="icon_pl"></span>
<h3>Private Lesson</h3>
</li>
<li><span class="icon_join"></span>
<h3>Join Us</h3>
</li>
<li><span class="icon_wedding"></span>
<h3>Wedding Dance</h3>
</li>
<li><span class="icon_rockz"></span>
<h3>ROKCZ Couture</h3>
</li>
<li><span class="icon_show"></span>
<h3>Show Dance</h3>
</li>
</ul>
</div>
Divs with content
<div class="content">
<div id="pl">
<h2>Headlin 1</h2>
<p class="product_description"></p>
</div>
<div id="join">
<h2>Headlin 2</h2>
<p class="product_description"></p>
</div>
<div id="wedding">
<h2>Headline 3</h2>
<p class="product_description"></p>
</div>
<div id="rockz">
<h2>Headline 4</h2>
<p class="product_description"></p>
</div>
<div id="show">
<h2>Headline 5</h2>
<p class="product_description"></p>
</div>
</div>

you could put the name of the relating div in either a rel attribute or in a data prefixed attribute
then in JS/Jquery hide all of the divs, and only show the one you need - that relates to the new attribute.
something along the lines of
$(".icon").click(function(){
$(".maindivs div").hide();
var toggleDiv = $(this).attr("data-divToToggle");
$("#"+toggleDiv ).slideDown("slow");
if ($(this).hasClass('icon_active'))
{
$(this).removeClass('icon_active')
}
else
{
$('.icon_active').removeClass('icon_active');
$(this).toggleClass("icon_active");
}
return false;
});

Following script would do what you expect.
$(function () {
//hide all div on load except first one
$('div.content div:not(#pl)').hide();
$("li.icon").click(function () {
var div = $(this).data('div');
$('div.content div.icon_active')
.removeClass('icon_active')
.hide('slow');
$('div.content div#' + div)
.addClass('icon_active')
.show('slow');
return false;
});
});
Your HTML would look something liek this.
<div class="iconteiner">
<ul>
<li class='icon' data-div='pl'><span class="icon_pl"></span>
<h3>Private Lesson</h3>
</li>
<li class='icon' data-div='join'><span class="icon_join"></span>
<h3>Join Us</h3>
</li>
<li class='icon' data-div='wedding'><span class="icon_wedding"></span>
<h3>Wedding Dance</h3>
</li>
<li class='icon' data-div='rockz'><span class="icon_rockz"></span>
<h3>ROKCZ Couture</h3>
</li>
<li class='icon' data-div='show'><span class="icon_show"></span>
<h3>Show Dance</h3>
</li>
</ul>
</div>
<div class="content">
<div id="pl" class="icon_active">
<h2>Headlin 1</h2>
<p class="product_description"></p>
</div>
<div id="join">
<h2>Headlin 2</h2>
<p class="product_description"></p>
</div>
<div id="wedding">
<h2>Headline 3</h2>
<p class="product_description"></p>
</div>
<div id="rockz">
<h2>Headline 4</h2>
<p class="product_description"></p>
</div>
<div id="show">
<h2>Headline 5</h2>
<p class="product_description"></p>
</div>
</div>
Here is WORKING JS FIDDLE

Unless the elements are related hierarchically, I'd add a data attribute to be able to easily find the correct content.
$(function() {
$('li[data-content]').click(function(){
$('li[data-content] span').removeClass('icon-active');
$(this).find('span').addClass('icon-active');
$('.content div').hide();
$('.content div[id='+$(this).data('content')+']').show();
});
});
.content div {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="iconteiner">
<ul>
<li data-content='pl'><span class="icon_pl"></span><h3>Private Lesson</h3></li>
<li data-content='join'><span class="icon_join"></span><h3>Join Us</h3></li>
<li data-content='wedding'><span class="icon_wedding"></span><h3>Wedding Dance</h3></li>
<li data-content='rockz'><span class="icon_rockz"></span><h3>ROKCZ Couture</h3></li>
<li data-content='show'><span class="icon_show"></span><h3>Show Dance</h3></li>
</ul>
</div>
<div class="content">
<div id="pl">
<h2>Headlin 1</h2>
<p class="product_description"></p>
</div>
<div id="join">
<h2>Headlin 2</h2>
<p class="product_description"></p>
</div>
<div id="wedding">
<h2>Headline 3</h2>
<p class="product_description"></p>
</div>
<div id="rockz">
<h2>Headline 4</h2>
<p class="product_description"></p>
</div>
<div id="show">
<h2>Headline 5</h2>
<p class="product_description"></p>
</div>
</div>

show/hide divs on click- how to make div 1 show on page load?

I have learned how to show and hide divs using javascript but how do I make the first div show on page load without having to click it? Basically I am creating a menu with 6 different links. I would like the first link div to show on page load and then hide when other links are clicked.
<div class="nav">
<ul id="menu">
<li id="1">Topic One</li>
<li id="2">Topic Two</li>
<li id="3">Topic Three</li>
</ul>
</div>
<div class="main">
<div id="1" class="content">
<h1>Page 1</h1>
<p>First section of content.</p>
</div>
<div id="2" class="content">
<h1>Page 2</h1>
<p>Second section of content</p>
</div>
<div id="3" class="content">
<h1>Page 3</h1>
<p>Third section of content.</p>
</div>
</div>
</div>
JavaScript
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.4.js'></script>
<script type='text/javascript'>//<![CDATA[
$(function(){
$('#menu a').click(function(e){
hideContentDivs();
var tmp_div = $(this).parent().index();
$('.main div').eq(tmp_div).show();
});
function hideContentDivs(){
$('.main div').each(function(){
$(this).hide();});
}
hideContentDivs();
});//]]>
</script>

As I mentioned in my comment Ids that start with a number are a bad idea, whats more you have duplicate IDs which is even worse, keep IDs unique.
There are a couple of approaches here, one is use CSS to hide the divs, then use Jquery to show them. The other is to use jQuery to hide them...as that is the path you have started down, lets use that.
But first lets fix your html
$('#menu a').click(function(e){
var target = $(this).attr("href");
$(".main .content").not(target).hide();
$(target).show();
return(false);
});
//Hide the divs on load
$(".main .content").hide();
//Set an initial target
var initialTarget = "#Section1";
//Overide that target if coming from a bookmark. E.g www.mypage.com#Section2
//Another reson to use meaningful href
if(location.hash.length > 0) {initialTarget =location.hash; }
$(initialTarget).show();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="nav">
<ul id="menu">
<!-- Give your href some actual meaning -->
<li >Topic One</li>
<li >Topic Two</li>
<li >Topic Three</li>
</ul>
</div>
<div class="main">
<div id="Section1" class="content">
<h1>Page 1</h1>
<p>First section of content.</p>
</div>
<div id="Section2" class="content">
<h1>Page 2</h1>
<p>Second section of content</p>
</div>
<div id="Section3" class="content">
<h1>Page 3</h1>
<p>Third section of content.</p>
</div>
</div>
</div>