Develop Reference

Change content from menu

I have different titles on my left menu and I want to change the text by clicking per each title, Please let me know what function should I write on javascript and which Html tags should I use.
Here is My Titles Html script:
<div class="widget">
<ul class="feature-list">
<li>Транспорт на свадьбу</li>
<li>Развозка персонала</li>
<li>Туризм</li>
<li>Ретроавтомобили</li>
<li>Бизнес-поездки</li>
<li>Экскурсии</li>
</ul>
</div>

I believe if you would like to change the tags to be changed onclick you should add the tags You will need to change the http request to your requested link
<div class="menu">
<div id="nav">
<ul>
<li>
<font color="#000">ЛЕГКОВЫЕ АВТОМОБИЛИ</font>
</li>
<li>
ЛИМУЗИНЫ
</li>
<li>
МИКРОАВТОБУСЫ (4-20 МЕСТ)
</li>
<li>
АВТОБУСЫ (25-30 МЕСТ)
</li>
<li>
АВТОБУСЫ (45-50 МЕСТ
</li>
</ul>
</div>
</div>
Does this answer your question?

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.

Disable nav tabs based on status

I have this bootstrap nav tab.
<div ng-app="myApp" ng-controller="myCtrl">
<div class="breadcrumb">
<ul class="nav nav-tabs">
<li class="active">Submitted</li>
<li>Pending Approval</li>
<li>Work In Progress</li>
<li>Complete</li>
</ul>
</div>
<div class="tab-content" style="margin:5%;">
<div class="tab-pane active" id="submitted" ng-class="{'active':dataStatus=='submitted'}">
Submitted data will be displayed here....
</div>
<div class="tab-pane" id="pendingApproval" ng-class="{'active':dataStatus=='pending'}">
Pending Approvals will be displayed here....
</div>
<div class="tab-pane" id="workInProgress" ng-class="{'active':dataStatus=='inprogress'}">
In Progress data will be displayed here....
</div>
<div class="tab-pane" id="complete" ng-class="{'active':dataStatus=='completed'}">
Completed data will be displayed here....
</div>
</div>
</div>
here I am getting different status in dataStatus variable,based on that am adding active class to a tab.
My Query is If I get pending in dataStatus ,tabs should be disabled after pending tab I can access submitted and pending tab.I should can access in progress and completed tab.
Same as all status. I should access only the previous tabs based on status.how can I do it?Any help?Thanks!!
fiddle : https://jsfiddle.net/70Luf7hu/76/

You can use a separate class for disabling the li element and add conditions/expressions as per your requirement in the ng-class. Below is the jsfiddle link
fiddle : https://jsfiddle.net/anilsarkar/9xf5neyz/17/
.disabled {
pointer-events:none;
opacity:0.6;
}
<ul class="nav nav-tabs">
<li class="active">Submitted</li>
<li ng-class="{'disabled':dataStatus=='submitted'}">Pending Approval</li>
<li ng-class="{'disabled':dataStatus=='submitted' || dataStatus=='pending'}">Work In Progress</li>
<li ng-class="{'disabled':dataStatus=='submitted' || dataStatus=='pending' || dataStatus=='inprogress'}">Complete</li>
</ul>
Note: I have added a disabled class to disable the li element

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();
});

Show first div on page load and hide others and then show the rest on click of the menu items

I am working on a menu where on click of the navigation items, the div will be shown, but by default, the first div should be shown and rest hidden. They should be seen only on click of other navigation items.
Below is my code that I have tried so far.
The HTML:
<ul id="menu">
<li class="page_item current_page_item justClick">a</li>
<li class="page_item page-item-2 justClick">b</li>
<li class="page_item page-item-2 justClick">c</li>
<li class="page_item page-item-2 justClick">d</li>
<li class="page_item page-item-2 justClick">e</li>
<li class="page_item page-item-2 justClick">f</li>
<li class="page_item page-item-2 justClick">g</li>
<li class="page_item page-item-2 justClick">h</li>
<li class="page_item page-item-2 justClick">i</li>
</ul>
<div class="content">
</div>
<div class="content1">
cccc1
</div>
<div class="content2">
cccc2
</div>
<div class="content3">
cccc3
</div>
<div class="content4">
cccc4
</div>
<div class="content5">
cccc5
</div>
<div class="content6">
cccc6
</div>
<div class="content7">
cccc7
</div>
<div class="content8">
cccc8
</div>
<div class="content9">
cccc9
</div>
The Script:
$('.justClick').bind('click', function() {
$('div.content').html($('div.content' + ($(this).index()+1)).html());
});
The CSS:
.content {
background-color: red;
}
The JSFiddle link:
http://jsfiddle.net/6uzU6/
I am getting to achieve the onclick functionality on the click of navigation items on click of them, but all the div's are visible.
What I want, is that all the div's except first div (with the class .content) should be hidden and when you click on the navigation items, it should show up.

Try this:
$('div').not(".content,.content1").hide();
$('.justClick').bind('click', function() {
$('div').not(".content").hide();
$('div.content').html($('div.content' + ($(this).index()+1)).html());
});
DEMO

It seems like there is something missing in your code because there is no relation between the links and div you want to show. you will require more attributes on to maintain a relations between them.
A better approach would be apply a common class to all div like 'content-block' and class equal to use following code.
$(".content-block:not(:first)").hide();
and show respective div on click on link
$("#menu li").click(function(e){
$(".content-block").eq($(this).index()).show();
});
you can use other parameters as well to relate them instead of index.

Give attribute to div runat="server" and Id="dv1"
using property display block and none u can show or hide it