We Keep Coding

How to change content when click Sidebar

I have sidebar in this code :
<nav id="sidebar">
<ul class="list-unstyled components">
<li >
Home
</li>
<li>
Page1
</li>
</ul>
</nav>
Now I want to change the only content when user click sidebar button (Home or Page1)
and I already have a body for those 2 content (Home and Page1)

Try using this code. I wrote the explanation in the comments
//container is the selected element into which the content is to be loaded
var container = document.querySelector('#content'),
//these are the selectors for your links
linkHome = document.querySelector('#link__home'),
linkPage1 = document.querySelector('#link__page1');
//function that loads content
function loadContent(content) {
// AJAX request
var xhr = new XMLHttpRequest();
xhr.open('POST', content, true);
xhr.onload = function() {
var el = document.createElement('div');
el.innerHTML = this.response;
container.empty()
container.prepend(el);
}
xhr.send();
}
//After clicking the selector it will start the function loading the content. Enter the URL to your files in the appropriate place
linkHome.addEventListener('click', function(e){
loadContent('/URL/TO/home.html');
e.preventDefault() ;
});
linkPage1.addEventListener('click', function(e){
loadContent('/URL/TO/page1.html');
e.preventDefault() ;
});
<nav id="sidebar">
<ul class="list-unstyled components">
<li>
<!-- Add to your links ID attribure -->
<a id="link__home" href="#">Home</a>
</li>
<li>
<!-- Add to your links ID attribure -->
<a id="link__page1" href="#">Page1</a>
</li>
</ul>
</nav>
<div id="content"></div>

Is it possible to add links to bootstrap 4 nav-pills tab-panel from a different page?

I have a service page that using bootstrap 4's pills .nav-pills navigation (this is not the main navigation navbar), which is working very well. My challenge is that i want to be able to click on a link on the home page that should open the targeted tab-panel on the service page. Haven't been able to find a way for almost a week now. How can i achieve this?
Service.html
<div class="nav flex-column nav-pills col-md-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<ul class="list-group list-unstyled">
<li class="nav-item">
<a class="nav-link list-group-item" id="v-pills-manpower-tab" data-toggle="pill" href="#v-pills-manpower" role="tab" aria-controls="v-pills-manpower" aria-selected="false">Manpower Supply</a>
</li>
</ul>
</div>
<div class="tab-content col-md-8" id="v-pills-tabContent">
<div class="tab-pane fade" id="v-pills-manpower" role="tabpanel" aria-labelledby="v-pills-manpower-tab">
<h5>Man Power Supply</h5>
</div>
Home.html
<a href="services.html#v-pills-manpower" data-toggle="tab" >
My code in home.html doesn't work but that's one of my many attempts.

On the home page, configure data attributes to help. I've added data-tab-name to the anchor and it defines the desired, selected tab for the service page.
When the page loads, it re-configures the onclick of the link so that the tab name can be stored in localStorage before redirecting the user to the service page.
Home.html
<a href="services.html" data-tab-name="v-pills-manpower" data-toggle="tab" >
<script type="text/javascript">
window.onload = function() {
document.querySelectorAll('[data-toggle="tab"]').forEach(function(item, index){
item.addEventListener('click', function(e){
e.preventDefault();
localStorage.selectedTabName = item.getAttribute('data-tab-name');
window.location.href = item.href;
});
});
};
</script>
When the service page loads, the javascript looks for the saved tab name in localStorage, identifies that tab and then makes it the active tab by applying the "active" class to the appropriate element.
Service.html
<script type="text/javascript">
window.onload = function() {
document.querySelectorAll('.nav-link').forEach(function(item, index){
var isActive = (item.className.indexOf('active')>-1);
if (item.id==localStorage.selectedTabName) {
if (!isActive) {
item.className += ' active';
}
item.setAttribute('aria-selected', 'true');
} else {
item.setAttribute('aria-selected', 'false');
if (isActive) {
item.className = item.className.replace('active', '');
}
}
});
};
</script>

How to set active tab after fetching the view from an ajax call?

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.

Link to Jquery Tab does not work

I am working on a L5 project and i am using a Jquery tab for one of its pages. I have a little menu for reaching tab contents without clicking just tabs.
<div id="aracislem" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Araç Arama </li>
<li>Araç Kayıt </li>
<li>İstatistik </li>
<li>Araç Takibi </li>
</ul>
</div>
</div>
Any my tab is
<script type="text/javascript">
$(document).ready(function () {
$('#tab-container').tabs({
active: $.cookie('activetab'),
activate: function (event, ui) {
$.cookie('activetab', ui.newTab.index(), {
expires: 10
});
}
});
});
</script>
<div id="tab-container" class='tab-container'>
<ul>
<li class='tab'>Araç Arama</li>
<li class='tab'>Araç Kayıt</li>
<li class='tab'>İstatistik</li>
<li class='tab'>Araç Takip</li>
</ul>
<div class='panel-container'>
<div id="aracaramatab">
Araç Arama
</div>
<div id="arackayittab">
Araç Kayıt
</div>
<div id="istatistiktab">
İstatistik
</div>
<div id="aractakiptab">
Araç Takip
</div>
</div>
</div>
When i clik to menu links i cant reach to necessary tab, link changes in the browser but does not redirect to tab also when i click to tabs, content changes but links do not change. Anybody knows what am i doing wrong ?

Check this DEMO : http://jsfiddle.net/yeyene/mktgnp3e/1/
Your problem is when you click link and after going to link (it will redirect a different page?), want to active the tab, right?
So get the url first, then get the hash, then do the active tab step.
JQUERY
$(document).ready(function () {
$("#tab-container").tabs({});
// for testing purpose
var url = "http://localhost/pages/aracislemler#arackayittab";
// use this script for getting url
//var url = window.location.href;
var hash = url.substring(url.indexOf('#'));
// trigger click to tab with url hash name
$('#tab-container a[href='+hash+']').trigger('click');
});
*Use the line var url = window.location.href; for your app, then take out the current url getting test variable.

Post variable when link is clicked from link menu

I have 3 link i menu. And I post their ID when link is clicked:
Fiddle: Fiddle
html:
<div class="home-content">
<div class="menu-bar">
<ul class="nav nav-tabs">
<li class="active" id="top_picks">Top Picks<sup>beta</sup></li>
<li>Popular<sup>beta</sup></li>
<li>Friends analysis</li>
</ul>
<p class="custom-alert">Article changes everyday! come back for more fun......</p>
</div>
</div>
<div class="articleContent">This content changes when link is clicked</div>
JS:
$(function () {
$(".menu-bar li a").click(function () {
var category = $(this).attr('id');
$(".active").removeClass("active");
$(this).parent().addClass("active");
//$('label').css('color', selText);
// When user clicks o "top picks" then it does not post category to ivite_db.php
$.ajax({
url: "invite_db.php",
type: "POST",
data: {"link_menu": category},
success: function(data) {
$(".articleContent").html(data);
}
});
});
});
code works fine when popular and analysis link is clicked. But when top_picks link is clicked, it does ot post the category?
what is wrong with it?

You should have the ID in the a element, not the li, try this:
<li class="active"><a href="#" id="top_picks">
Fiddle