<ul class="nav nav-tabs" role="tablist">
<li class="active"><div id="tickets">My Tickets</div></li>
<li class="active"><div id="approvals">My Approvals</div></li>
</ul>
The above Approvals tab is connected to a div so I want the div to load only when the user clicks on this tab:
I don't want the div to load when the page loads
Try something like this:
$("#approvals").click(function() {
$('#your_div_id').html('<div> Hello World </div>');
});
Set display:none on the div that you don't want to appear on page load.
Then, bind a click handler to the approvals div:
$("#approvals").click(function() {
$("#approvals_div").show();
});
Your markup might look something like this:
$("#approvals").click(function(){
$("#approvals_div").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-tabs" role="tablist">
<li class="active"><div id="tickets">My Tickets</div></li>
<li class="active"><div id="approvals">My Approvals</div></li>
</ul>
<div id="approvals_div" style="display:none;">
I'm initially hidden!
</div>
Related
Here's what I'm trying to do:
Create a navigation with a sub-nav or child page.
When the user clicks on about, I want the about to toggle the Bob li.
It should slide down and slide up when clicked on and off of about.
$(document).ready(function() {
$("#grab").click(function() {
$(".sub-nav").slideToggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
<li id="#grab">About
<ul class="sub-nav">
<li>Bob</li>
</ul>
</li>
<li>Contact</li>
<li>Faqs</li>
</ul>
Your HTML is wrong you have a hashtag before grab id="#grab" it should be id="grab" by default the li contain "Bob" will be show to resolve this issue, add display:none; to the ul either through a class or inline
$(document).ready(function() {
$("#grab").click(function() {
$(".sub-nav").stop().slideToggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
<li id="grab">About
<ul style="display:none" class="sub-nav">
<li >Bob</li>
</ul>
</li>
<li>Contact</li>
<li>Faqs</li>
</ul>
The # is used to reference id, in your tag you're seting the id as #grab, and in your jquery you're setting the .click() event to the class grab.
Then you'll need to change your <li> id to grab:
<li id="grab">
You can add display: none to your <ul>. In that way, when the page load, the sub-nav starts hidden:
You can set this on the tag:
<ul class="sub-nav" style="display: none;">
Or in your css:
.sub-nav{
display: none;
}
I have a bootsrap navbar, and every menu elements of it has a href attribute, to navigate through pages. When I click on, one of the elements the navbar disappears, of course because I left the page which contained it. But how can I do it dinamically? One always visible navbar fixed top, and every html page( navbar element) stay on the page where the navbar is.(without a database)
<nav class="navbar navbar-default" role="navigation" id="topmenu">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown active">
US
</li>
<li class="dropdown">
SERVICES
</li>
<li class="dropdown">
WORK WITH US
</li>
<li class="dropdown">
EN
</li>
</ul>
</nav>
You may do something like this:
<div id="navbar">
Google
...
</div>
<iframe id="frame" width="100%" height="100%">Update Browser!</iframe>
<script>
function goto(url){
document.getElementById("frame").src=url;
}
</script>
This will load the clicked link into the iframe. The page stays the same, so the navbar is still visible. You could also redirect all link cicks to end up into the iframe:
<div id="navbar">
Google
...
</div>
<iframe id="frame" width="100%" height="100%">Update Browser!</iframe>
<script>
window.onload=function (){
[...document.getElementsByTagName("a")].forEach(function(a){
a.onclick=function(e){
e.preventDefault();//the redirect
document.getElementById("frame").src=this.href;
}
});
};
</script>
Or if you like the jquery.load:
<div id="navbar">
Google
...
</div>
<div id="content"></div>
<script>
$(document).ready(function(){
$("a").each(function(){
this.on("click",function(e){
e.preventDefault();
$("#content").load(this.href);
});
});
});
</script>
I'm trying to replace two divs that has separate ul elements into a single one, so I can create a single ul with the li of both, but my current code creates separate ul, and that is not my intended purpose, could anyone enlighten me on how to make the proper selection for these:
my jQuery
$('nav div.moduletable_gfbb_navigationbar, nav div.moduletable_menu_navigationbar').replaceWith(function(){
var html = '<ul class="nav navbar-nav navbar-right">';
$(' ul',this).each(function(){
html += $(this).html();
});
html+='</ul>';
return html;
});
my HTML
<div class="moduletable_menu_navigationbar">
<ul class="menu">
<li id="current" class="active item8"><span>Banca Personas</span></li>
<li class="item9"><span>Banca Pyme</span></li>
<li class="item10"><span>Banca Empresas</span></li>
<li class="item602"><span>Bankard</span></li>
</ul>
</div>
<div class="moduletable_gfbb_navigationbar">
<ul class="menu">
<li class="item12"><span>Informacion Institucional</span></li>
</ul>
</div>
And the output I get (not what I want)
<ul class="nav navbar-nav navbar-right">
<li class="item12"><span>Informacion Institucional</span></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li id="current" class="active item8"><span>Banca Personas</span></li>
<li class="item9"><span>Banca Pyme</span></li>
<li class="item10"><span>Banca Empresas</span></li>
<li class="item602"><span>Bankard</span></li>
</ul>
What I want is a single 'ul', I know I can recode it, but I'm trying to use the less code posible.
Your example does not include a <nav> tag which may be the primary cause of your problem, but to produce more readable code I would do it like this.
I used an array for the selectors, because it aids in readability and maintainability. It also allows you to easily insert the new list before the first menu by using only the first selector, whatever that may be.
Basically I select all of the <li> elements descending from the selectors and move those to the newlist. Then insert the new list before the first list div. Then remove the old lists.
var selectors = [
'nav div.moduletable_gfbb_navigationbar',
'nav div.moduletable_menu_navigationbar'
], selectorText = selectors.join(', ');
var newList = $('<ul class="nav navbar-nav navbar-right">');
$('li', selectorText).each(function(){ newList.append(this); });
$(selectors[0]).before(newList);
$(selectorText).remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div class="moduletable_menu_navigationbar">
<ul class="menu">
<li id="current" class="active item8"><span>Banca Personas</span></li>
<li class="item9"><span>Banca Pyme</span></li>
<li class="item10"><span>Banca Empresas</span></li>
<li class="item602"><span>Bankard</span></li>
</ul>
</div>
<div class="moduletable_gfbb_navigationbar">
<ul class="menu">
<li class="item12"><span>Informacion Institucional</span></li>
</ul>
</div>
</nav>
$('.moduletable_menu_navigationbar .menu').append($('.moduletable_gfbb_navigationbar .menu').html());
$('.moduletable_gfbb_navigationbar').remove();
Is this what you are looking for!!
how to add javascript function to a class of active ??
I do not understand completely about javascript.
if i click menu its like remove and add new class nav active.
<div id="sidebar">
<ul id="mainNav">
<li id="navDashboard" class="nav active">
<span class="icon-home"></span>
Beranda
</li>
<li id="navPages" class="nav">
<span class="icon-document-alt-stroke"></span>
Data Profil
<ul class="subNav">
<li>Peta Lokasi</li>
<li>Site Plan</li>
</ul>
</li>
You can use something like this:
$(selector).click(function(){
$(this).removeClass(your class)
.addClass('active');
});
You have to define the selector you want to do something.
<ul class="nav nav-pills nav-stacked" id="moduleList">
<li class="">
User</li>
<li>
Blog
</li>
</ul>
I have the above bootstrap pill in my website. The active item changes and the script execute to load the active item in the page. In some condition I don't want to change the active item and the decision will be made inside the onclick function loadModule(). How can I do that?
Remove data-toggle="pill" from your markup, then change the class of the selected 'li' to active or empty within 'loadModule'. Here's an example:
function loadModule(a) {
//your logic/////
$('#liUser').attr('class', '');
$('#liBlog').attr('class', 'active');
}
<ul class="nav nav-pills nav-stacked" id="moduleList">
<li id="liUser" class="">
User
</li>
<li id="liBlog">
Blog
</li>
</ul>
I don't know if is useful for you. Try this using jQuery:
$(document).delegate('.nav-pills li a', 'click', function () {
$('.nav-pills li').removeClass('active');
this.parent().addClass('active');
});
Then remove click and data-toggle attributes. You can add some logic inside of delegate callback.