gpt4 book ai didi

javascript - 如何根据 URL 在 jquery 中使选项卡处于事件状态

转载 作者:行者123 更新时间:2023-12-03 05:02:44 24 4
gpt4 key购买 nike

这里我使用选项卡,没关系,我想进行一些额外的更改,在我的页脚页面中我有 4 个链接,如果我单击该链接意味着 URL 应该像这样 ouroffice.php?cityname= chennai,现在我想要做的意味着基于城市名称,我想让选项卡处于事件状态我尝试过,但我无法使选项卡处于事件状态,怎么办?

//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>

最佳答案

只需使用 window.location.search 并运行函数(在文档准备好时)将事件类设置为适当的 li 元素,如下所示:

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

关于javascript - 如何根据 URL 在 jquery 中使选项卡处于事件状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42148387/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com