我有一段代码可以获取URL中的任何哈希变换。
只要有人输入哈希值,它就能正常工作。
但是,我想更改容器的类名。当我尝试它改变所有类名时,我可以看到原因。
无论如何都要指定例如的索引
$(".agenda-tabs li").this('class', 'active');
以下是代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery Example</title>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="https://raw.githubusercontent.com/cowboy/jquery-hashchange/v1.3/jquery.ba-hashchange.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$( "#seminars" ).hide();
$( "#speakers" ).hide();
$(function(){
// Bind the event.
$(window).hashchange( function(){
// Alerts every time the hash changes!
var currenthash = location.hash;
$('.agenda-tabs').find('.ui-link').each(function(){
var innerDivId = $(this).attr('href');
if(innerDivId==currenthash)
{
$(".agenda-tabs li").attr('class', 'active');
}
else
{
$(".agenda-tabs li").attr('class', '');
}
});
})
// Trigger the event (useful on page load).
$(window).hashchange();
});
});
</script>
</head>
<body>
<ul class="agenda-tabs nav nav-tabs">
<li class="first-tab">
<a class="btn btn-default ui-link" data-toggle="tab" href="#t1">
City
<span></span>
</a>
<div id='conference'>
1
</div>
</li>
<li class="active">
<a class="btn btn-default ui-link" data-toggle="tab" href="#t2">
Speakers
<span></span>
</a>
<div id='seminars'>
2
</div>
</li>
<li class="last-tab">
<a class="btn btn-default ui-link" data-toggle="tab" href="#t3">
Stage
<span></span>
</a>
<div id='speakers'>
3
</div>
</li>
</ul>
</body>
</html>
答案 0 :(得分:1)
是否可以为您的LI元素提供ID?然后您可以将代码更改为:
$(".agenda-tabs li#" + currenthash).addClass('active');
答案 1 :(得分:1)
您已在上下文变量(<a>
)中拥有锚this
元素。您只需要更改父元素<li>
// get the parent li and set it as active
$(this).closest("li").addClass('active'); // Add
或者
// get the parent li and set it as active
$(this).closest("li").removeClass('active'); // remove
答案 2 :(得分:1)
您可以更改此绑定
$(window).hashchange( function(){
var currenthash = location.hash;
$(".agenda-tabs li").removeClass('active')
$('.agenda-tabs').find('.ui-link').each(function(){
var innerDivId = $(this).attr('href');
if(innerDivId==currenthash)
{
$(".agenda-tabs li").addClass('active');
}
});