我点击它时尝试更改标签的类名。当我点击其他标签时,我也希望它更改回原来的那个。
我设置了一个非常基本的网页,仅供测试。该页面的完整代码将复制如下。现在,虽然类似的代码在JSfiddle中进行了测试并且在那里工作,但它并没有正常工作。请注意,设计部分显示正常。以下是两个css规则,其中包含完整页面的代码:
.member_nav { float:left; margin-right:1px;height:65px;text-align:center;background-color:#636464;padding:0 20px 0 20px;font-size:15px;font-weight:bold;color:#fff;line-height:60px;}
.member_nav_clicked { float:left; margin-right:1px;height:65px;text-align:center;background-color:#0099cc;padding:0 10px 0 10px;font-size:15px;font-weight:bold;color:#fff;line-height:60px;}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Nav</title>
<link href="css_new/style.css" media="screen" rel="stylesheet" type="text/css">
<script type="text/javascript">
$(document).ready(function() {
$('.member_nav').on('click', function() {
$(this).addClass('member_nav_clicked').siblings().removeClass('member_nav_clicked');
});
});
</script>
</head>
<body>
<div class="member_nav">
<a href="#">Nav 2</a>
</div>
<div class="member_nav">
<a href="#">Nav 3</a>
</div>
<div class="member_nav">
<a href="#">nav 4</a>
</div>
<div class="member_nav">
<a href="#">Nav 5</a>
</div>
</body>
</html>
以下是我发现的导致一切无法在真实网站上运行的代码。这是在jQuery调用的正下方:
<script type="text/javascript">
var popup_jq = jQuery.noConflict();
popup_jq(document).ready(function() {
popup_jq("#various1").fancybox({
'titlePosition' : 'inside',
'transitionIn' : 'none',
'transitionOut' : 'none',
'showCloseButton' : true
});
});
</script>