0

目前正在修改我的菜单栏的代码，只是想询问如何更改我的 hr 标签的类，其中每当我单击链接时，链接下方的行都会更改。好吧，我正在为我的水平菜单做这件事。我已经编写了一些代码，但我承认我不太确定自己在做什么。到目前为止，这是我的代码：

HTML

 <div class="menu">
    <table class="menu_item">
        <tr>
            <td>
                <a href="#">Events</a>
                <hr class="active" />
            </td>
            <td>
                <a href="#">Reports</a>
                <hr />
            </td>
            <td>
                <a href="#">Settings</a>
                <hr />
            </td>
            <td>
                <a href="#">Logout</a>
                <hr />
            </td>
        </tr>
    </table>
</div>

<script type="text/javascript" src="<?php echo $base; ?>javascripts/anim.js"></script>

CSS

    .menu{
    margin-top:20px;
    margin-bottom:10px;
}

.menu_item td{
    text-align:center;
    width:25%;
}

.menu_list{
    width:1000px;
    margin-left:auto;
    margin-right:auto;
}

.active{
    background-color:#330000;
}

a {
    color:#ffffff;
    text-decoration:none;
    outline:0;
    border:0;
}

hr.active{
    color:#ffff00;
}

和jQuery

$("a").click(function() {
  $("hr").click(function (){
      $("hr").removeClass("active");
      $(this).addClass("active");
  });
});

好吧，我基本上只是希望它看起来像 android ICS 上的选项卡。虽然只是一点点。

4

4 回答 4

1 
$("a").click(function() {
 $(this).next().toggle();
});

谢谢

于 2012-12-11T04:08:06.913 回答
1

看看给出的例子：

$('.menu_item a').each(function(i, e){
    $(this).click(function(){
        $('.menu_item hr').removeClass('active');
        $(this).next().addClass('active');
    });
});

这是现场工作代码：http: //jsfiddle.net/jogesh_pi/EFmvJ/

于 2012-12-11T04:14:36.173 回答
1

我不确定 Google ICS 是什么样子，但我认为这可以满足您的要求。

$("a").click(function() {
      $("hr").removeClass("active");
      $(this).next().addClass("active");
});​

演示在这里。我稍微改变了CSS。

在您的代码中，这$("hr").click是不必要的。用户不点击 hr 标签，只点击 a 标签。此外，您正在将active类添加到 a 标签，而不是 hr。

于 2012-12-11T04:16:23.893 回答
1

尝试以下

$('.menu a').click(function(){
    //Selects hr tag below a tag and toggle active
    $(this).next().toggleClass('active');
});​

但是您还需要将您的 CSS .active 类更改为以下内容以更改 HR 标记颜色

hr.active{
display: block; height: 1px;
border: 0; border-top: 1px solid #ffff00;
margin: 1em 0; padding: 0;
}​
于 2012-12-11T04:22:46.653 回答