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
});
});
});
Related
I have following bootstrap tabs code which is working when I click on the tab but I want to open the tab when I click on a link which I have created using ul > li > a
but unfortunately it's not working. how can i do this?
html code:
<ul>
<li>tab1</li>
<li>tab2</li>
</ul>
<div class="container">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>I'm in Section 2.</p>
</div>
</div>
</div>
</div>
Js Code:
<script>
// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
$('.nav-tabs a[href='+hash.replace(prefix,"")+']').tab('show');
}
// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
</script>
Give your <ul> a class name, like alt-nav-tabs, and then copy the existing navigation JS code. It would look something like this:
HTML:
<!-- Add class to your <ul> element -->
<ul class="alt-nav-tabs">
<li>tab1</li>
<li>tab2</li>
</ul>
<div class="container">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>I'm in Section 2.</p>
</div>
</div>
</div>
</div>
JS:
<script>
// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
$('.nav-tabs a[href='+hash.replace(prefix,"")+']').tab('show');
}
// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
// Copied (modify class selector to match your <ul> class): Change hash for page-reload
$('.alt-nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
</script>
Persistent tab visibility:
Based on the following comment, you have a tab that is showing no matter which tab is active...
one my give link I see that on a random tab a class called tab-visible
is added automatically.
To resolve this, you can use the following code to remove this class after the HTML loads:
<script>
$(document).ready(function() {
$('#tab-bem-estar-e-ambiente').removeClass('tab-visible');
});
</script>
Place this script in the <head> section, and you should be good to go!
Alternatively...
I noticed you tried to override the original tab-visible behavior. As it is now, the tab with the tab-visible class will never be visible, even when that tab is clicked on and active. If you never intend to use the tab-visible class on your tabs, you could just remove the style from the original CSS document here:
http://futura-dev.totalcommit.com/wp-content/themes/futura-child/style.css?ver=4.9.8
Find that CSS file in your hosted files, search for .tab-visible, and simply remove the class.
I am working on tab
There are 5 tabs
About Us
Our Work
Our Team
News & Events
Contact us
and inside each of them there are content and links, images.
What i am trying to achieve here whenever i click the link inside the tab Our Team content,
It should open the Contact us Tab content.
Here is the code i am using currently, It has some custom js and jquery 2.2.0 used.
Please check the code, i haven't put css here.
The live link of this example is Live Demo
Please help me
// TABS
var tabs = $('.container_tabs');
$('.tabs-content > div', tabs).each(function (i) {
if (i != 0) $(this).hide(0);
});
tabs.on('click', '.tabs a', function (e) {
e.preventDefault();
var tabId = $(this).attr('href');
$('.tabs a', tabs).removeClass();
$(this).addClass('active');
$('.tabs-content > div', tabs).hide(0);
$(tabId).show();
});
// var tabs1 = $('.container_tabs1');
// $('.tabs-content > div', tabs1).each(function (i) {
// if (i != 0) $(this).hide(0);
// });
// tabs1.on('click', '.tabs a', function (e) {
//
// e.preventDefault();
//
// var tabId = $(this).attr('href');
//
//
// $('.tabs a', tabs1).removeClass();
// $(this).addClass('active');
//
// $('.tabs-content > div', tabs1).hide(0);
// $(tabId).show();
//
// });
(function ($) {
jQuery.fn.lightTabs = function (options) {
var createTabs = function () {
tabs = this;
i = 0;
showPage = function (tabs, i) {
$(tabs).children("div").children("div").hide();
$(tabs).children("div").children("div").eq(i).show();
$(tabs).children("ul").children("li").removeClass("active");
$(tabs).children("ul").children("li").eq(i).addClass("active");
};
showPage(tabs, 0);
$(tabs).children("ul").children("li").each(function (index, element) {
$(element).attr("data-page", i);
i++;
});
$(tabs).children("ul").children("li").click(function () {
showPage($(this).parent().parent(), parseInt($(this).attr("data-page")));
});
};
return this.each(createTabs);
};
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs cw-wrapper">
<ul class="cw-30">
<li class="" data-page="0">About Us</li>
<li data-page="1">Our Work</li>
<li data-page="2">Our Team</li>
<li data-page="3">Our Partners</li>
<li data-page="4" class="active">Work With Us</li>
<li data-page="5">Contact us</li>
</ul>
<div class="cw-70">
<div class="content" style="display: none;">
Content 1
</div>
<div class="content" style="display: none;">
Content 2
</div>
<div class="content" style="display: none;">
Content 3
</div>
<div class="content" style="display: none;">
Content 4
</div>
<div class="content" style="display: none;">
<h3>Contact us Content</h3>
</div>
</div>
</div>
If I understand you correctly, you want to be able to switch tabs by links that are inside your tab contents too. In that case you should create a function for switching tabs, instead of a click event in you menu. here is an example:
edit #1:
I removed all onclicks and bind switchTab function to all elements that have switch-tab class.
edit #2:
As requested, you can pass initial tab number from url ?tab=x codepen
// set tab from url
// sample url: http://mywebsite.com/my-route?tab=2
$(document).ready(function() {
var url = new URL(window.location.href);
var tabNumber = url.searchParams.get('tab');
if (tabNumber)
switchTab(tabNumber);
});
// change tab by clicking an element with "switch-tab" class
$('.switch-tab').on('click', function(e) {
var tabNumber = e.target.getAttribute('data-tab');
switchTab(tabNumber);
});
// change tab by passing tab number
function switchTab(tabNumber) {
$('#tabs li').removeClass('active');
$('#tabs li[data-tab=' + tabNumber + ']').addClass('active');
$('.content').css('display', 'none');
$('.content[data-content=' + tabNumber + ']').css('display', 'block');
}
<style>
#tabs li.active {
font-weight: bold;
}
.content {
display: none;
}
.content.visible {
display: block;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs cw-wrapper">
<ul class="cw-30" id="tabs">
<li data-tab="0" class="switch-tab">About Us</li>
<li data-tab="1" class="switch-tab">Our Work</li>
<li data-tab="2" class="switch-tab">Our Team</li>
<li data-tab="3" class="switch-tab">Our Partners</li>
<li data-tab="4" class="switch-tab active">Work With Us</li>
<li data-tab="5" class="switch-tab">Contact us</li>
</ul>
<div class="cw-70">
<div class="content" data-content="1">
<p>Content 1</p>
</div>
<div class="content" data-content="2">
<p>Content 2</p>
</div>
<div class="content" data-content="3">
<p>Content 3</p>
</div>
<div class="content visible" data-content="4">
<p>Content 4</p>
go to contact us
</div>
<div class="content" data-content="5">
<h3>Contact us Content</h3>
</div>
</div>
</div>
I have two pages. My main page contains links in different places within this page to perform actions such as Edit profile, Change my Password, Upload a profile picture etc.
Main page 'index.html'
EDIT PROFILE
CHANGE PASSWORD
UPLOAD PHOTO
My second page 'accounts.html' uses Bootstrap Nav Tabs.
<ul class="nav nav-tabs">
<li class="active"> Edit my profile</li>
<li class="">Change my Password</li>
<li class="">Upload Photo</li>
</ul>
<div class="tab-pane" id="editProfile">
BARK BARK
</div>
<div class="tab-pane" id="changePassword">
WOFF WOFF
</div>
<div class="tab-pane" id="uploadPhoto">
MEOW MEOW
</div>
How do I click the link on the main page and open the correct corresponding Bootstrap Tab on the second page?
<!-- CLICK ON LINK WITHIN MAIN PAGE -->
$('#editProfile').on('click', function() {
$('body').load( "accounts.html" ).find('active').removeClass('active');
$('li.active').addClass('active');
});
I think you can use localStorage for this solution. The first, save id of the selected tab that you click on index.html into localStorage. And then, on the account.html you get value selected tab from localStorage. Here is the sample, hope to help, my friend!
--In the index.html
EDIT PROFILE
CHANGE PASSWORD
UPLOAD PHOTO
$(document).ready(function(){
$('a').on('click', function(e){
localStorage.setItem('activeTab', $(e.target).attr('id'));
window.location.replace("accounts.html");
});
});
--In the account.html
<ul class="nav nav-tabs">
<li class="active" id="lieditProfile">
Edit my profile
</li>
<li class="" id="lichangePass">
Change my Password
</li>
<li class="" id="liuploadPhoto">
Upload Photo
</li>
</ul>
<div class="tab-content">
<div id="editProfile" class="tab-pane fade in active">
<h3>Edit the profile.</h3>
</div>
<div id="changePass" class="tab-pane fade">
<h3>Change Password</h3>
</div>
<div id="uploadPhoto" class="tab-pane fade">
<h3>Upload Photo</h3>
</div>
</div>
<script>
$(document).ready(function(){
var activeTab = localStorage.getItem('activeTab');
$('li').removeClass();
$('#li'+ activeTab).addClass('active');
$('.tab-pane').removeClass('in active');
$('#' + activeTab).addClass('in active show');
});
</script>
I am trying to set active tab for bootstrap 3 tabs after fetching the view from an ajax call but Its not working.
The view is something like this:
<div class="portlet light ">
<div class="portlet-title tabbable-line">
<div class="caption">
<i class="icon-globe font-dark hide"></i>
<span class="caption-subject font-dark bold uppercase">TODAY</span>
</div>
<ul id="tab" class="nav nav-tabs">
<li class="active">
Collections
</li>
<li>
Activities
</li>
</ul>
</div>
<div class="portlet-body">
<!--BEGIN TABS-->
<div class="tab-content">
<div class="tab-pane active" id="tab_1_1">
And here is the script:
<script type="text/javascript">
function load_page()
{
$.ajax(
{
url: 'notification_table/',
type: 'GET',
dataType: 'html',
}).done(
function(data)
{
$('#home_view').html(data);
}
);
$('.nav-tabs a[href="#tab_1_2"]').tab('show');
}
window.onload = function ()
{
load_page();
setInterval(function () {
load_page(); }, 5000);
}
</script>
As you can see that I tried doing $('.nav-tabs a[href="#tab_1_2"]').tab('show'); and I also tried $('#tab a[href="#tab_1_2"]').tab('show'); but both are not working.
What am I doing wrong here?
Try to use class="active" only in li not in anchor tag, almost everything right.
<li class="active">
Collections
</li>
I think that you may look for "jQuery doesn't work after the content is loaded via AJAX".
jQuery doesn't work after content is loaded via AJAX
I fixed my code before but I forget what I did.
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