How change tab background on selected item? javascript ? or php?
my code. I want when I click on Apartman 1 that this tab is selected. how to do it with javascript or php?
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<ul class="nav navbar-nav">
<li >Pocetna</li>
<li class="active" >Apartman 1</li>
<li>Apartman 2</li>
<li>Apartman 3</li>
</ul>
</div>
</nav>
You've already given an active class to one of the list items. To style that one with a background colour you could add a CSS style, like this:
nav li.active {
background-color: yellow;
}
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<ul class="nav navbar-nav">
<li>Pocetna</li>
<li class="active">Apartman 1</li>
<li>Apartman 2</li>
<li>Apartman 3</li>
</ul>
</div>
</nav>
It sounds from your comment like you want help adding the class="active" part to the correct list item based on what page you're currently on.
That can either come from the server (each page has class="active" on its corresponding link in the HTML sent back from the server) or it can be set with Javascript once the page has loaded.
Setting it on the server side is going to be easiest.
How to do it depends how your pages are structured. Is this nav a common element you include into each page? I'll assume it is, and you include it on each page with <?php include 'nav.php'; ?> or similar.
In nav.php you could have something like the following:
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<ul class="nav navbar-nav">
<li <?php if ($_SERVER['PHP_SELF'] === '/apartmanitrifunovic/index.php') { ?>class="active"<?php } ?>>Pocetna</li>
<li <?php if ($_SERVER['PHP_SELF'] === '/apartmanitrifunovic/apartmanjedan.php') { ?>class="active"<?php } ?>>Apartman 1</li>
<li <?php if ($_SERVER['PHP_SELF'] === '/apartmanitrifunovic/apartmandva.php') { ?>class="active"<?php } ?>>Apartman 2</li>
<li <?php if ($_SERVER['PHP_SELF'] === '/apartmanitrifunovic/apartmantri.php') { ?>class="active"<?php } ?>>Apartman 3</li>
</ul>
</div>
</nav>
Or, with a loop to cut down on repetition:
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<ul class="nav navbar-nav">
<?php foreach ([
'/apartmanitrifunovic/index.php' => "Pocetna",
'/apartmanitrifunovic/apartmanjedan.php' => "Apartman 1",
'/apartmanitrifunovic/apartmandva.php' => "Apartman 2",
'/apartmanitrifunovic/apartmantri.php' => "Apartman 3",
] as $file => $name) { ?>
<li <?php if ($_SERVER['PHP_SELF'] === $file) { ?>class="active"<?php } ?>>
<a href="http://localhost<?php echo $file; ?>">
<?php echo $name; ?>
</a>
</li>
<?php } ?>
</ul>
</div>
</nav>
You can use the :active selector to change the color of the active page. You can use your active class to style the selected tab.
.active:active{
background-color: blue;
}
Maybe what you are looking for:
var list = document.querySelectorAll('li');
list.forEach(function(el){
el.onclick=function(){
list.forEach(function(el){
el.classList.remove("active");
});
el.classList.toggle("active");
}
});
li.active{
background:yellow;
}
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<ul class="nav navbar-nav">
<li >Pocetna</li>
<li class="active" >Apartman 1</li>
<li>Apartman 2</li>
<li>Apartman 3</li>
</ul>
</div>
</nav>
Edit:
In case you want to save the state of the clicked tab in a new page, you should use javascript to read the URL of the page where you will be passing the clicked tabName as a GET parameter.
var url_ = window.location.href;//https://example.com?tabName=Apartman%1
var c = url.searchParams.get("tabName");
document.getElementById(c).click();
Related
I am trying to make my website's menu in one file only and just include it in the rest of the .html pages. I am copy and pasting the menu each time I make a new page because I want the tab that is active to be highlighted for each different page. This is the reason why I can't make one file only for every page, and I have no idea how can I make it work to set the tab active in each different page.
This is the code I am copy-pasting in each page.
<!-- BEGIN MENU -->
<section id="menu-area">
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div id="navbar" class="navbar-collapse collapse">
<ul id="top-menu" class="nav navbar-nav navbar-right main-nav">
<li>Home</li>
<li>Downloads</li>
<li>Media</li>
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown">Research <span
class="fa fa-angle-down"></span></a>
<ul class="dropdown-menu" role="menu">
<li>D3</li>
</ul></li>
<li>Team</li>
<li class="active">Contact</li>
</ul>
</div>
<!--/.nav-collapse -->
<a href="#" id="search-icon"> <i class="fa fa-search"> </i>
</a>
</div>
</nav>
</section>
<!-- END MENU -->
In this case the contact tab is highlighted:
<li class="active">Contact</li>
If the case is that the home page is active, then I would need to do this:
<li class="active">Home</li>
I hope I made myself clear, my English is terrible. I appreciate any idea, I am really new at web development.
One thing you can do is to read the URL and on base of that you add the active class to that link in your menu.
$(function() {
var pgurl = window.location.href.substr(window.location.href
.lastIndexOf("/")+1);
$("#nav ul li a").each(function(){
if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
$(this).addClass("active");
})
});
Using D3
<script>
var pgUrl = window.location.href.substr(window.location.href.lastIndexOf('/') + 1);
d3.select("#navbar").selectAll("a").each(function(d){
if(d.tecode here == pgUrl )
d.attr("class","active");
});
</script>
I think this way more useful:
$(function(){
var pgUrl = window.location.href.substr(window.location.href.lastIndexOf('/') + 1);
$("#nav ul li a[href='"+ pgUrl +"']").addClass('active');
});
Trying to make javascript horizontal menu, but can't get second button to open its own items, (when i click the second button it opens the items that are for the first button) here is current code:
JavaScript:
$(document).ready(function() {
$(".menu-button,.menu-button1").click(function() {
$(".menu-bar").toggleClass("open");
});
})
HTML:
<ul class="menu">
<li title="home">menu</li>
<li title="pencil">pencil</li>
<li title="about">about</li>
</ul>
<ul class="menu-bar">
<li>Menu0</li>
<li>Home2000</li>
<li>About</li>
<li>Parent</li>
<li>About</li>
</ul>
<ul class="menu-bar">
<li>Menu1</li>
<li>About</li>
</ul>
Before I start my answer, let me explain jQuery a bit.
$(".menu-button,.menu-button1").click(function() {
$(".menu-bar").toggleClass("open");
});
This broken down:
$(".menu-button,.menu-button1").click(function() { -> When any item with class menu-button OR class menu-button1 is clicked
$(".menu-bar").toggleClass("open"); ->Toggle the "open" class for all elements in your page with class menu-bar.
Since you call all the menus instead of the specific one you want, it opens both of them.
So, be more specific by - for starters - using IDs, or unique/identifying classes:
JS:
$(document).ready(function() {
$(".menu-button.home").click(function() {
$(".menu-bar.home").toggleClass("open");
});
$(".menu-button.pencil").click(function() {
$(".menu-bar.pencil").toggleClass("open");
});
})
HTML:
<ul class="menu">
<li title="home">menu</li>
<li title="pencil">pencil</li>
<li title="about">about</li>
</ul>
<ul class="menu-bar home">
<li>Menu0</li>
<li>Home2000</li>
<li>About</li>
<li>Parent</li>
<li>About</li>
</ul>
<ul class="menu-bar pencil">
<li>Menu1</li>
<li>About</li>
</ul>
I agree with M.Doye's comment about using .each (but sorry, I can't answer directly).
I want to add that, it will be much easier with that kind of HTML structure I think:
<ul class="menu">
<li title="home">
Show Menu 1
<ul class="menu-bar">
<li>Menu1
</li>
</ul>
</li>
<li title="pencil">
Show Menu 2
<ul class="menu-bar">
<li>Menu2
</li>
</ul>
</li>
</ul>
The, click on the link and use .next() or .siblings or closest... to show the right ul.
But of course you'll have to rewrite you CSS :)
Here is updated code
$(document).ready(function () {
$(".menu-button,.menu-button1").click(function () {
$(this).siblings(".menu-bar").toggleClass("open");
})
})
<ul class="menu">
<li title="home">menu
<ul class="menu-bar">
<li>Menu1</li>
<li>About</li>
</ul>
</li>
<li title="pencil">pencil
<ul class="menu-bar">
<li>Menu0</li>
<li>Home2000</li>
<li>About</li>
<li>Parent</li>
<li>About</li>
</ul>
</li>
</ul>
here is a jsfiddle
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.
Recently I am having a problem with my jquery code. I was trying to get the elements from the html using the jquery find method but its not working. I have tried changing the elements name but still i cant find where is my mistake.
Here is the following html code:
<div class="navbar-collapse collapse">
<nav>
<ul class="nav navbar-nav navbar-right">
<li class = "dropdown"><span>About Us</span><b class = "caret"></b>
<ul class = "dropdown-menu">
<li data-slide = '1'>Philosophy</li>
<li>Founding Members</li>
<li>Committee</li>
<li>Code of Ethics</li>
</ul>
</li>
<li data-slide='2'>Digital Ecosystem</li>
<li data-slide='3'>Fellow & Members</li>
<li data-slide='4'>SIGs</li>
<li data-slide='5'>Local Chapters</li>
<li data-slide="7">Events</li>
<li data-slide="8">Our Service</li>
<li>
<a href="#" onClick="window.open('logout.php','_self','width=400,height=200,toolbar=yes, location=yes,directories=yes,status=yes,menubar=yes,scrollbars=yes,copyhistory=yes, resizable=yes')">
<?php
if (isset($_SESSION['CurrentUser'])) {
echo "Log Out";
}
?>
</a>
</li>
<li>
<a href="#" onClick="window.open('login.php','_self','width=400,height=200,toolbar=yes, location=yes,directories=yes,status=yes,menubar=yes,scrollbars=yes,copyhistory=yes, resizable=yes')">
<?php
if (!isset($_SESSION['CurrentUser'])) {
echo "Login/Register";
}
?>
</a>
</li>
</ul>
</nav>
</div>
I have included my jquery code too :
var links = $('.nav, .navbar-nav, .navbar-right').find('li');
Actually what the code does is once it find the 'li' html elements it slides the page each time a 'li' element is being clicked. Now if I click on the 'li' elements my page doesnt scrolls to the selected page. it would be great if someone is there to solve my problem.
Try this (if you really want the "links" tags):
var links = $('.nav.navbar-nav.navbar-right').find('a');