单击导航时获取标签以更改类

时间:2014-04-18 20:27:16

标签: javascript jquery css

我点击它时尝试更改标签的类名。当我点击其他标签时,我也希望它更改回原来的那个。

我设置了一个非常基本的网页,仅供测试。该页面的完整代码将复制如下。现在,虽然类似的代码在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>

0 个答案:

没有答案