Develop Reference

How to show content from the specific div with javascript/jQuery

I want to show content from the specific div when the page loads. This is my code:
$(document).ready(function () {
$('.pbox:gt(0)').hide();
$('#buttons').on('click', 'a', function () {
$('.current').not($(this).closest('li').addClass('current')).removeClass('current');
$('.pbox:visible').hide(600);
$('.pbox[id=' + $(this).attr('data-id') + ']').show(600);
});
});
.current {
background-color:red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<ul id="buttons">
<li>
<a data-id="div1">One</a>
</li>
<li>
<a data-id="div2">Two</a>
</li>
<li>
<a data-id="div3">Three</a>
</li>
<li class="current">
<a data-id="div4">Four</a>
</li>
</ul>
<div class="pbox" id="div1">
Content 1
</div>
<div class="pbox" id="div2">
Content 2
</div>
<div class="pbox" id="div3">
Content 3
</div>
<div class="pbox" id="div4">
Content 4
</div>
As you can see by default am adding the current class to the element:
<li class="current">
<a data-id="div4">Four</a>
</li>
So what am trying to achieve is when the page loads show Content 4 as you can see right now it shows Content 1 when the page loads.
Can anybody try to help me with this?

If you need show content where link is active you can do it with code below
$.fn.pageLoad = function() {
const currentId = $('li.current>a').data('id');
$('.pbox:visible').hide(600);
$('.pbox[id=' + currentId + ']').show(600);
}
$('document').pageLoad();
Just make any load function which close all pboxes and find current li>a id and open it. Also you can add setTimeout if your content is loading slow.

Allowing user to customize the items on the list menubar

I've created a simple menu bar using bootstrap. now i want the user to be able to edit the items on the list including the links on the menu, add, delete etc. How do i do this using just frontend code like javascript etc?
Code:
<div id="sidebar">
<ul class="sidebar-nav">
<li class="sidebar-menu">
<a>MENU</a>
</li>
<li>
Link #1
</li>
<li>
Link #2
</li>
<li>
Link #3
</li>
<li>
Link #4
</li>
</ul>
</div>

What you're looking for is possible with vanilla Javascript, jQuery, or a host of other libraries. jQuery is where I'd recommend you start.
You can create new elements by passing html elements as strings to the jQuery function. See the "Creating New Elements" section of this page. Using append and remove as Muzammil mentioned, you can add and remove elements from the DOM.
I've created a small jsFiddle demonstrating some of the functions I'm talking about and how you might use them. This is a limited demo that doesn't include every feature you'd want for a full implementation, but uses some of the pertinent jQuery functions.
HTML
<div id="sidebar">
<ul class="sidebar-nav">
<li class="sidebar-menu">
<a>MENU</a>
</li>
<li>
Link #1
<button class="delete-link">Delete</button>
</li>
<li>
Link #2
<button class="delete-link">Delete</button>
</li>
<li>
Link #3
<button class="delete-link">Delete</button>
</li>
<li>
Link #4
<button class="delete-link">Delete</button>
</li>
</ul>
<div class="input-field">
<label for="link-title">Enter link title</label>
<input type="text" class="link-title" name="link-title" placeholder="link Title" />
</div>
<div class="input-field">
<label for="link-title">Enter link URL</label>
<input type="url" class="link-url" name="link-url" />
</div>
<input type="submit" class="add-button" value="Add" />
</div>
Javascript w/ jQuery
var $addButton = $('.add-button');
var $sidebarMenu = $('.sidebar-nav');
// Add the event handlers
$(document).on('click', '.delete-link', removeLink);
$addButton.on('click', addLink);
function removeLink(e) {
// Remove the parent <li> element of the clicked link
var $link = $(e.currentTarget).closest('li');
$link.remove();
}
function addLink(e) {
e.preventDefault();
var $linkTitle = $('.link-title');
var $linkUrl = $('.link-url');
// Create the new link element using values from text inputs
var $link = $('<li>').append(
$('<a>').attr('href', $linkUrl.val()).text($linkTitle.val()));
// Add a delete button for the link
$link.append($('<button>').addClass('delete-link').text('Delete'));
$sidebarMenu.append($link);
// Reset the text inputs
$linkTitle.val('');
$linkUrl.val('');
}

you can use jquery to achieve this, the following function will help you : append, remove, html, text

Bind the listener to dynamic generate content in HTML

There is a dynamic generate page using jquery like this:
var html = "tab...button..datatable...etc...";
And I generate the page when click on a button
$("btn").on("click",function(){
$("body").append(html);
});
The problem is , all element from generated html does not have event listener, so for the click button /change event I use
$('body').on('change', '.gui-file', function (event) {
However, for the bootstrap element how can I bind the event to the generated element ? e.g. Tab?
Or are there any better way other than binding after generate the html content? Thanks
The tab:
<div class="tab-block mb10">
<ul class="nav nav-tabs nav-tabs-left tabs-border">
<li class="active">
English
</li>
<li class="">
繁體
</li>
<li class="">
简体
</li>
</ul>
<div class="tab-content">
<div id="tab1_1" class="tab-pane active">
</div>
<div id="tab1_2" class="tab-pane">
</div>
<div id="tab1_3" class="tab-pane">
</div>
</div>

Can you please init newly added tab by calling:
$("btn").on("click",function(){
$("body").append(html);
$(".nav-tabs").tab();
});

adding class to list element after page redirection using jQuery

I will keep my question short for the sake of brevity. I have a page (lets say page 1) on which I have 2 links attached to two different anchor tag and on clicking those anchor tag, I am redirecting user to page 2. However I would like to highlight (add class 'active') on two different list element on page 2, which depends whether the user have clicked anchor 1 or 2 from the previous page. As of now the first li tag is highlight with class active.
This is my HTML markup on page 1 where I have anchor tags
<div class="landing-thumb">
<div class="view view-first">
<div class="mask">
<a id="link1" class="info">Click here</a>
</div>
</div>
</div>
<div class="landing-thumb">
<div class="view view-first">
<div class="mask">
<a id="link2" class="info">Click here</a>
</div>
</div>
</div>
JS for on click event
$('#link1').on('click', function () {
window.location = "/page2";
});
$('#link2').on('click', function () {
window.location = "/page2";
});
On page 2, I have a list which is generated dynamically (by default the first element in list has a class 'active') (only the span id is different for every list element). Here is the rough HTML mark up
<ul id="menu" class="nav nav-pills">
<li class="active">
<a href="#">
<span id="spanLink1">List 1</span>
</a>
</li>
<li>
<a href="#">
<span id="spanLink2">List 2</span>
</a>
</li>
<li>
<a href="#">
<span id="spanLink3">List 3</span>
</a>
</li>
<li>
<a href="#">
<span id="spanLink4">List 4</span>
</a>
</li>
</ul>
Now what I am trying to achieve over here if the user click on link1 from page 1, he/she will be redirected to page 2 with li class active which has span id="spanLink3" and on clicking link2 from page 1 li class active which hasspan id="spanLink4"

Add some hash tag into your url
$('#link1').on('click', function () {
window.location = "/page2#link1";
});
$('#link2').on('click', function () {
window.location = "/page2#link2";
});
And on that page get this hash tag
window.location.hash or use php code also and add class accordint to it

Find child of parent container using jquery

I am probably looking at this the wrong way, but I am having trouble locating an element within my page and am hoping someone can help.
The scenario is this:
I have a <ul> containing a number of <li>'s which in turn contain <a href>'s. I am getting the value of the rel attribute of the clicked <a href> and want to replace the text in a <span class='someclass'> which is located in a parent container. There may be more than one of these <span class='someclass'> on the page so I need to find the closest one.
Here is how my HTML looks
<h3 class="my-header-class">
<span class="some-class">Title Text</span>
</h3>
<ul class="tabs">
<li><a rel="Title Text 1" href="#tab1">Link 1</a></li>
<li><a rel="Title Text 2" href="#tab2">Link 2</a></li>
<li><a rel="Title Text 3" href="#tab3">Link 3</a></li>
</ul>
Here is my javascript
var titletext = $(this).attr('rel');
var container = $(this).parent().children(".some-class");
container.text(titletext);
The titletext variable is being set with the correct text but I am unable to replace the text of the <span class='someclass'>. I assume because I am not finding it correctly.
Thanks,
Tristan

$(this).parent().parent().prev().children(".some-class");
<h3> <!-- PREV OF UL -->
<span> <!-- CHILDREN OF H3 -->
<ul> <!-- PARENT OF <LI> AND <A> -->
<li> <!-- PARENT OF <A> AND CHILDREN OF <UL> -->
<a> <!-- CHILDREN OF <UL> AND <LI> -->

$(this).parent().parent().prev('h3').children(".some-class")

$("ul.tabs a").click(function() {
var titletext = $(this).attr('rel');
$(this).closest("ul.tabs").prev().find(".some-class").text(titletext);
});
Working example: http://jsfiddle.net/peeter/67vTV/