here i am using tab it is fine,i want to make some extra changes , in my footer page i have 4 link , if i am click that link means URL should be like this ouroffice.php?cityname=chennai , now what i want to do means bassed upon the cityname i want to make the tab is active i tried but i am not able to make the tab is active,how can do this?
//var cityname = '<?php echo $_GET['cityname']?>'; var cityname = "hydrabad"; if (cityname == "chennai") { $("#nv_li").tabs({ active: 1 }); } else if (cityname == "hydrabad") { $("#nv_li").tabs({ active: 2 }); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row" style="padding-top: 30px;"> <ul class="nav nav-tabs" id="nv_li"> <li class="active" id="link"><a data-toggle="tab" href="#beng">BENGALURU</a> </li> <li id="link"><a data-toggle="tab" href="#chennai">CHENNAI</a> </li> <li id="link"><a data-toggle="tab" href="#hydrabad">HYDERABAD</a> </li> <li id="link"><a data-toggle="tab" href="#dubai">DUBAI</a> </li> <li id="link"><a data-toggle="tab" href="#london">LONDON</a> </li> <li><a data-toggle="tab" href="#kochi" style="border-right: 0px;">HONG KONG</a> </li> </ul> <div class="tab-content"> <div id="beng" class="tab-pane fade in active"> <?php include 'bangalore.php';?> </div> <div id="chennai" class="tab-pane fade"> <?php include 'chhenai.php';?> </div> <div id="hydrabad" class="tab-pane fade"> <?php include 'hyd.php';?> </div> <div id="kochi" class="tab-pane fade"> <?php include 'kochi.php';?> </div> <div id="mumbai" class="tab-pane fade"> <?php include 'mumbai.php';?> </div> <div id="pune" class="tab-pane fade"> <?php include 'pune.php';?> </div> <div id="abu" class="tab-pane fade"> <?php include 'abu_dhabi.php';?> </div> <div id="dubai" class="tab-pane fade"> <?php include 'dubai.php';?> </div> <div id="london" class="tab-pane fade"> <?php include 'london.php';?> </div> </div> </div>
Just use window.location.search and run function(on document ready) to set active class to appropriate li element, like so:
// Search parameter extractor
function getSearchParam(searchKey) {
var params = window.location.search.replace('?', '').split('&');
var searchParam = null;
var keyValue;
for (var i = 0, len = params.length; i < len; i++) {
keyValue = params[i].split('=');
if (keyValue[0] === searchKey) {
searchParam = keyValue[1];
break;
}
}
return searchParam;
}
// Function to set active city class
function setActiveCity(cityName) {
var link = document.querySelector('a[data-toggle="tab"][href="#' + cityName + '"]');
var content = document.getElementById(cityName);
if (link) {
link.parentNode.classList.add('active');
}
if (content) {
content.classList.add('in', 'active');
}
}
var city = getSearchParam('cityname');
if (city) {
setActiveCity(city);
}
<ul id="navi">
<li><a class="menu" href="#">Pune</a></li>
<li><a class="menu" href="#">Baramati</a></li>
<li><a class="menu" href="#">chennai T</a></li>
<li><a class="menu" href="#">London</li>
<li><a class="menu" href="#">UK</a></li>
$('a.menu').click(function(){
$('a.menu').removeClass("active");
$(this).addClass("active");
});
I Hope. it will help you!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.