Ok im working on this website where Id like to have the content of a div change to content based on the menu item clicked. I do not have pages for the different menu items but I have all the different content in divs in the index page. I would like to incorporate JQuery but I just cannot seem to find a way to link the menu item class or id to the corresponding div element. My code below":
<html>
<body>
<div class="navbar grid_12">
<ul>
<li class="btn" id="home">Home</li>
<li class="btn" id="about">About Me</li>
<li class="btn" id="gallery">Gallery</li>
<li class="btn" id="resume">Resume</li>
<li class="btn" id="contact">Contact Me</li>
</ul>
</div>
<div class="content-container">
<div class="bio content">
About me content
</div>
<div class="contact content">
Contact me content
</div>
<div class="gallery content">
gallery content
</div>
</div>
</body>
</html>
etc..
as for my JQuery coding so far this is where i am after hours of trying different things out
//Update Content-Container Div
$(document).ready(function(){
var $main = $(".content-container");
var $section = $(".content");
$("#about").click(function(){
$main.empty();
$main.find(".bio");
$(".bio").show();
});
});
Instead of writing individual handlers for each menu item, use a data-* attribute to refer to a particular content which need to be displayed, then in the click handler use that attribute to decide which content has to be displayed
<div class="navbar grid_12">
<ul>
<li class="btn" id="home">Home</li>
<li class="btn" id="about" data-target=".bio">About Me</li>
<li class="btn" id="gallery" data-target=".gallery">Gallery</li>
<li class="btn" id="resume">Resume</li>
<li class="btn" id="contact" data-target=".contact">Contact Me</li>
</ul>
</div>
<div class="content-container">
<div class="bio content">
About me content
</div>
<div class="contact content">
Contact me content
</div>
<div class="gallery content">
gallery content
</div>
</div>
then
$(document).ready(function () {
var $main = $(".content-container");
var $section = $(".content").hide();
$(".navbar li.btn").click(function (e) {
e.preventDefault();
$section.hide();
var target = $(this).data('target');
if(target){
$section.filter(target).show();
}
});
});
Demo: Fiddle
Check out jquery tabs,
I think you need this.
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>Home</li>
<li>About Me</li>
<li>Gallery</li>
<li>Resume</li>
<li>Contact Me</li>
</ul>
<div id="tabs-1">
<p>Home content</p>
</div>
<div id="tabs-2">
<p>About me content</p>
</div>
<div id="tabs-3">
<p>Gallery content </p>
</div>
<div id="tabs-4">
<p>Resume content </p>
</div>
<div id="tabs-5">
<p>Contact Me content </p>
</div>
</div>
</body>
</html>
Try:
Assuming ids are associated with relevant classes.
HTML:
<li class="btn" id="bio">About Me</li>
JS:
$(".btn").click(function () {
$(".content-container .content").hide();
$(".content-container").find("."+$(this).attr("id")).show();
});
DEMO here.
Here I initially hid everything, then based on what links you click, the page displays the correct content. Note that your about page has the wrong id attribute so it will not work but your contact and gallery pages work. This is roughly how the twitter bootstrap framework works, I do suggest you look at that.
var $main = $(".content-container");
var $section = $(".content");
$section.hide();
$("li.btn").on('click', function() {
var link_id = $(this).attr('id');
var content = $main.find("." + link_id);
$section.hide();
content.show();
})
Working Example
const containers = Array.from(document.querySelectorAll('.content'));
// Slicing for link as it's not related to changing the slide content,
// so we don't want to bind behaviour to it.
const links = Array.from(document.querySelectorAll('.navbar ul .btn a')).slice(1);
$(function() {
hideEls(containers);
});
function hideEls (els) {
if (Array.isArray(els)) {
els.forEach(el => {
el.style.display = 'none';
});
}
return;
}
function showEl (els, i, e) {
e.preventDefault();
hideEls(els);
els[i].style.display = 'block';
}
links.forEach((link, i) => {
link.addEventListener('click', showEl.bind(null, containers, i));
});
Here's a fiddle
Related
thi is javascript code to show another html file inside index.html
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function(){
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
<div id="header"></div>
<!--Remaining section-->
<div id="footer"></div>
but how to make when i click example header to show just content of header.html or if i click footer to show just footer.html
<li><span>Header</span></li>
<li><span>Footer</span></li>
Here's an example:
HTML
<ul id="nav">
<li>
<a href="header.html" data-container="header">
<span>Header</span>
</a>
</li>
<li>
<a href="footer.html" data-container="footer">
<span>Footer</span>
</a>
</li>
</ul>
<div id="header"></div>
<!--Remaining section-->
<div id="footer"></div>
JavaScript
$(document).ready(function() {
$('ul#nav li a').on('click', function() {
var el = $(this);
$('#' + el.data('container')).load(el.attr('href'));
return false;
});
});
I use ZURB Foundation 5's tabs. When I click on a tab the hash in the URL is changed.
I would like to prevent this behaviour because I use hash to handle the page load.
I was trying to use preventDefault but nothing happened.
Does anybody know how to achieve this?
Second try it's really work. But not work on loaded content from Ajax
this is my index.html
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cẩm nang Dịch Lý beta 2.0.0</title>
<link rel="stylesheet" href="css/foundation.min.css" />
<link rel="stylesheet" href="css/app.css" />
<script src="js/vendor/modernizr.js"></script>
</head>
<body >
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<nav class="tab-bar">
<section class="left-small">
<!-- <a class="left-off-canvas-toggle menu-icon" href="#">
<span></span>
</a> -->
<a class="left-off-canvas-toggle icon-menu" href="#">
<span></span>
</a>
</section>
<section class="middle tab-bar-section">
<h1 class="title ">titke</h1>
</section>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li><a href="#home" >xxxx</a></li>
<li><label></label></li>
<li>xxxx</li>
</ul>
</aside>
<section class="main-section" >
<!-- content goes here -->
<div id="main"></div>
</section>
<a class="exit-off-canvas"></a>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
This is my app.js
page_manager();
$(window).on('hashchange', function(event) {
page = $(this).attr('href');
page_manager(page);
});
$(document).foundation({
offcanvas : {
open_method: 'move',
close_on_click : true
}
});
function page_manager(page){
var hash = window.location.hash;
if(!page){
var page = hash.split('/')[0];
}
var input = hash.split('/')[1];
off_canvas();
switch(page) {
case'':
case'undefined':
case'#home':
$( "#main" ).load( "pages/home.html", function() {
page_home();
});
break;
case '#solar':
$( "#main" ).load( "pages/solar.html", function() {
page_solar(input);
});
break;
}
And this is my solar.html
<ul class="tabs" data-tab role="tablist">
<li class="tab-title active" role="presentational" >Chủ</li>
<li class="tab-title" role="presentational" >Hỗ</li>
<li class="tab-title" role="presentational">Biến</li>
</ul>
<div class="tabs-content" data-section data-options="deep_linking: false">
<section role="tabpanel" aria-hidden="false" class="content active" id="panel2-1">
<h2>First panel content goes here...</h2>
</section>
<section role="tabpanel" aria-hidden="true" class="content" id="panel2-2">
<h2>Second panel content goes here...</h2>
</section>
<section role="tabpanel" aria-hidden="true" class="content" id="panel2-3">
<h2>Third panel content goes here...</h2>
</section>
</div>
From the Docs
Deep Linking
Set deep-linking to true to enable deep linking to sections of content. Deep linking allows visitors to visit a predefined URL with a hash that points to a particular section of the content. Deep linking also requires a matching data-slug on the content section that the hash should point to, without the pound (#) sign.
So if you mean you want to disable the hash change you may want to try to set it to false and remove the data-slug for the tabs..
<div data-section data-options="deep_linking: false">
I haven't used foundation before but this may help..
Edit
Include properly your Foundation dependencies
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.1/css/foundation.min.css" type="text/css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.1/js/foundation.min.js"></script>
Now try this, leave your tab sections empty and add an event to load content via AJAX, then call
HTML
<ul class="tabs" data-tab role="tablist">
<li class="tab-title active" role="presentational">
Chủ
</li>
<li class="tab-title" role="presentational">
Hỗ
</li>
<li class="tab-title" role="presentational">
Biến
</li>
<div class="tabs-content" data-section data-options="deep_linking: false">
<section role="tabpanel" aria-hidden="false" class="content active" id="panel2-1" data-options="deep_linking: false">
<h2>Here perhaps add something because it is the active tab</h2>
</section>
<section role="tabpanel" aria-hidden="true" class="content" id="panel2-2" data-options="deep_linking: false">
</section>
<section role="tabpanel" aria-hidden="true" class="content" id="panel2-3" data-options="deep_linking: false">
</section>
</div>
JavaScript
$(document).ready(function () {
$(document).foundation(); // Init Foundation
// When first Tab is clicked get AJAX content
$("a[href='#panel2-1']").bind("click", function (e) {
e.preventDefault();
$("#panel2-1").load("http://stackoverflow.com/questions/29596655/how-to-disable-hash-change-in-zurb-foundation-5 #answer-29596981", function (data) {
$(document).foundation('reflow'); // or $(document).foundation('tab', 'reflow');
});
});
// Second anchor
$("a[href='#panel2-2']").bind("click", function (e) {
e.preventDefault();
$("#panel2-2").load("http://stackoverflow.com/questions/29596655/how-to-disable-hash-change-in-zurb-foundation-5 #answer-29596981", function (data) {
$(document).foundation('reflow');
});
});
// and so on
$("a[href='#panel2-3']").bind("click", function (e) {
e.preventDefault();
$("#panel2-3").load("http://stackoverflow.com/questions/29596655/how-to-disable-hash-change-in-zurb-foundation-5 #answer-29596981", function (data) {
$(document).foundation('reflow');
});
});
});
See the DOCS for more information about $(document).foundation('reflow'); it is useful to call this function after your AJAX is completed and successful.
If your first tab is active by default you may want to load the content via AJAX on DOM ready or add the content manually for this tab. I tried this on my end and works fine.
My goal is to click in dropdown menu (div id=cssmenu) elements and display data in the using AJAX , so i made a small js code but i don't know how can i make it to load in the div i mentioned and erase the content that div displayed before.
html
<body>
<div class="container">
<div class="row">
<div class="col-md-3" >
<div id='cssmenu'>
<ul>
<li class='active'><span>Home</span></li>
<li class='has-sub'><a href='#'><span>About</span></a>
<ul>
<li><a href='#'><span>Project</span></a></li>
<li class='last'><a href='#'><span>Team</span></a></li>
</ul>
</li>
<li class='last'><a href='#'><span>News</span></a></li>
</ul>
</div>
</div>
<div class="col-md-9">
<div id="tabs">
<ul class="nav nav-tabs" id="prodTabs">
<li class="active"><a class="clickableLink" href="#tab_quick" data-url="http://localhost/bioinformatica/Main_page/Quick_search.html#qhelp">Quick Search</a></li>
<li><a class="clickableLink" href="#tab_advanc" data-url="#">Advanced Search</a></li>
<li><a class="clickableLink" href="#tab_struct" data-url="something3.txt">Structure Search</a></li>
</ul>
<div class="tab-content">
<div id="tab_quick" class="tab-pane active"></div>
<div id="tab_advanc" class="tab-pane active"></div>
<div id="tab_struct" class="tab-pane active"></div>
</div>
</div>
</div>
</div>
<div class="clearfix visible-lg"></div>
</div>
</div>
</body>
</html>
Javascript
$( document ).ready(function() {
$('#cssmenu a').click(function (e) {
e.preventDefault();
var url = $(this).attr("data-url");
var href = this.hash;
var pane = $(this);
// ajax load from data-url
$(href).load(url,function(result){
pane.tab('show');
});
});
});
For example in the Menu, when i click Home i would like it to load it's data-url attr in the div id=tabs , i.e, replacing all the contents by Home data-url. Thanks !
You can try the following:
$( document ).ready(function() {
$('#cssmenu a').click(function (e) {
e.preventDefault();
var url = $(this).data('url'); // this is the correct syntax
var pane = $(this);
$('#tabs').load(url, function(result){ // load the content directly to #tabs
pane.tab('show'); // display the tab
});
});
});
I had an html navigation code as below
function Data(string) {
//1. get some data from server according to month year etc.,
//2. unactive all the remaining li's and make the current clicked element active by adding "active" class to the element
$('.filter').removeClass('active');
$(this).addClass('active');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" style="padding-left:21px;">
<ul class="nav nav-tabs" style="padding-left:40px;">
<li class="active filter">This Month</li>
<li class="filter">Year</li>
<li class="filter">60 Days</li>
<li class="filter">90 Days</li>
</ul>
</div>
When the user clicks on any of the tabs
all the remaining tabs should be unactive,
and the current element/tab should be active,
My code above is not working.
How to make the above code work?
I only want to use javascript onclick for this. Is there any way that the this(current) object is send when the user clicks on the tab?
Use this html to get the clicked element:
<div class="row" style="padding-left:21px;">
<ul class="nav nav-tabs" style="padding-left:40px;">
<li class="active filter">This Month</li>
<li class="filter">Year</li>
<li class="filter">60 Days</li>
<li class="filter">90 Days</li>
</ul>
</div>
Script:
function Data(string, el)
{
$('.filter').removeClass('active');
$(el).parent().addClass('active');
}
Try like
<script>
function Data(string)
{
$('.filter').removeClass('active');
$(this).parent('.filter').addClass('active') ;
}
</script>
For the class selector you need to use . before the classname.And you need to add the class for the parent. Bec you are clicking on anchor tag not the filter.
<div class="row" style="padding-left:21px;">
<ul class="nav nav-tabs" style="padding-left:40px;">
<li class="active filter">This Month</li>
<li class="filter">Year</li>
<li class="filter">60 Days</li>
<li class="filter">90 Days</li>
</ul>
</div>
<script>
function Data(element)
{
element.removeClass('active');
element.addClass('active') ;
}
</script>
You have two issues in your code.. First you need reference to capture the element on click. Try adding another parameter to your function to reference this. Also active class is for li element initially while you are tryin to add it to "a" element in the function.
try this..
<div class="row" style="padding-left:21px;">
<ul class="nav nav-tabs" style="padding-left:40px;">
<li class="active filter">This Month</li>
<li class="filter">Year</li>
<li class="filter">60 Days</li>
<li class="filter">90 Days</li>
</ul>
</div>
<script>
function Data(string,element)
{
//1. get some data from server according to month year etc.,
//2. unactive all the remaining li's and make the current clicked element active by adding "active" class to the element
$('.filter').removeClass('active');
$(element).parent().addClass('active') ;
}
</script>
You can use addEventListener to pass this to a JavaScript function.
HTML
<button id="button">Year</button>
JavaScript
(function () {
var btn = document.getElementById('button');
btn.addEventListener('click', function () {
Date('#year');
}, false);
})();
function Data(string)
{
$('.filter').removeClass('active');
$(this).parent().addClass('active') ;
}
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script type="text/javascript" >
function openOnImageClick(event)
{
//alert("Jai Sh Raam");
// document.getElementById("images").src = "fruits.jpg";
var target = event.target || event.srcElement; // IE
console.log(target);
console.log(target.src);
var img = document.createElement('img');
img.setAttribute('src', target.src);
img.setAttribute('width', '200');
img.setAttribute('height', '150');
document.getElementById("images").appendChild(img);
}
</script>
</head>
<body>
<h1>Screen Shot View</h1>
<p>Click the Tiger to display the Image</p>
<div id="images" >
</div>
<img src="tiger.jpg" width="100" height="50" alt="unfinished bingo card" onclick="openOnImageClick(event)" />
<img src="sabaLogo1.jpg" width="100" height="50" alt="unfinished bingo card" onclick="openOnImageClick(event)" />
</body>
</html>
This most be the second most simple rollover effect, still I don't find any simple solution.
Wanted: I have a list of items and a corresponding list of slides (DIVs). After loading, the first list item should be selected (bold) and the first slide should be visible. When the user hovers over another list item, that list item should be selected instead and the corresponding slide be shown.
The following code works, but is awful. How can I get this behaviour in an elegant way? jquery has dozens of animated and complicated rollover effects, but I didn't come up with a clean way for this effect.
<script type="text/javascript">
function switchTo(id) {
document.getElementById('slide1').style.display=(id==1)?'block':'none';
document.getElementById('slide2').style.display=(id==2)?'block':'none';
document.getElementById('slide3').style.display=(id==3)?'block':'none';
document.getElementById('slide4').style.display=(id==4)?'block':'none';
document.getElementById('switch1').style.fontWeight=(id==1)?'bold':'normal';
document.getElementById('switch2').style.fontWeight=(id==2)?'bold':'normal';
document.getElementById('switch3').style.fontWeight=(id==3)?'bold':'normal';
document.getElementById('switch4').style.fontWeight=(id==4)?'bold':'normal';
}
</script>
<ul id="switches">
<li id="switch1" onmouseover="switchTo(1);" style="font-weight:bold;">First slide</li>
<li id="switch2" onmouseover="switchTo(2);">Second slide</li>
<li id="switch3" onmouseover="switchTo(3);">Third slide</li>
<li id="switch4" onmouseover="switchTo(4);">Fourth slide</li>
</ul>
<div id="slides">
<div id="slide1">Well well.</div>
<div id="slide2" style="display:none;">Oh no!</div>
<div id="slide3" style="display:none;">You again?</div>
<div id="slide4" style="display:none;">I'm gone!</div>
</div>
Rather than displaying all slides when JS is off (which would likely break the page layout) I would place inside the switch LIs real A links to server-side code which returns the page with the "active" class pre-set on the proper switch/slide.
$(document).ready(function() {
switches = $('#switches > li');
slides = $('#slides > div');
switches.each(function(idx) {
$(this).data('slide', slides.eq(idx));
}).hover(
function() {
switches.removeClass('active');
slides.removeClass('active');
$(this).addClass('active');
$(this).data('slide').addClass('active');
});
});
#switches .active {
font-weight: bold;
}
#slides div {
display: none;
}
#slides div.active {
display: block;
}
<html>
<head>
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="switch.js"></script>
</head>
<body>
<ul id="switches">
<li class="active">First slide</li>
<li>Second slide</li>
<li>Third slide</li>
<li>Fourth slide</li>
</ul>
<div id="slides">
<div class="active">Well well.</div>
<div>Oh no!</div>
<div>You again?</div>
<div>I'm gone!</div>
</div>
</body>
</html>
Here's my light-markup jQuery version:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function switchTo(i) {
$('#switches li').css('font-weight','normal').eq(i).css('font-weight','bold');
$('#slides div').css('display','none').eq(i).css('display','block');
}
$(document).ready(function(){
$('#switches li').mouseover(function(event){
switchTo($('#switches li').index(event.target));
});
switchTo(0);
});
</script>
<ul id="switches">
<li>First slide</li>
<li>Second slide</li>
<li>Third slide</li>
<li>Fourth slide</li>
</ul>
<div id="slides">
<div>Well well.</div>
<div>Oh no!</div>
<div>You again?</div>
<div>I'm gone!</div>
</div>
This has the advantage of showing all the slides if the user has javascript turned off, uses very little HTML markup and the javascript is pretty readable. The switchTo function takes an index number of which <li> / <div> pair to activate, resets all the relevant elements to their default styles (non-bold for list items, display:none for the DIVs) and the sets the desired list-item and div to bold and display. As long as the client has javascript enabled, the functionality will be exactly the same as your original example.
Here's the jQuery version:
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(function () {
$("#switches li").mouseover(function () {
var $this = $(this);
$("#slides div").hide();
$("#slide" + $this.attr("id").replace(/switch/, "")).show();
$("#switches li").css("font-weight", "normal");
$this.css("font-weight", "bold");
});
});
</script>
<ul id="switches">
<li id="switch1" style="font-weight:bold;">First slide</li>
<li id="switch2">Second slide</li>
<li id="switch3">Third slide</li>
<li id="switch4">Fourth slide</li>
</ul>
<div id="slides">
<div id="slide1">Well well.</div>
<div id="slide2" style="display:none;">Oh no!</div>
<div id="slide3" style="display:none;">You again?</div>
<div id="slide4" style="display:none;">I'm gone!</div>
</div>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(
function(){
$( '#switches li' ).mouseover(
function(){
$( "#slides div" ).hide();
$( '#switches li' ).css( 'font-weight', 'normal' );
$( this ).css( 'font-weight', 'bold' );
$( '#slide' + $( this ).attr( 'id' ).replace( 'switch', '' ) ).show();
}
);
}
);
</script>
</head>
<body>
<ul id="switches">
<li id="switch1" style="font-weight:bold;">First slide</li>
<li id="switch2">Second slide</li>
<li id="switch3">Third slide</li>
<li id="switch4">Fourth slide</li>
</ul>
<div id="slides">
<div id="slide1">Well well.</div>
<div id="slide2" style="display:none;">Oh no!</div>
<div id="slide3" style="display:none;">You again?</div>
<div id="slide4" style="display:none;">I'm gone!</div>
</div>
</body>
</html>
The only thing that's wrong with this code (at least to me) is that you're not using a loop to process all elements. Other than that, why not to it like that?
And with loop, I mean grabbing the container element via a JQuery and iterating over all child elements – basically a one-liner.