1

ブートストラップテーマクラスの構造が長くなっています。

これは私がデザインしているメニューです。

現在の「.active」クラスでダッシュボードを選択-

ブートストラップのこのメニューバーのデザインにこのコードを使用してください-

   <div class="navbar navbar-fixed-top navbar-inverse">
            <div class="navbar-inner">
                <div class="container-fluid">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span
                        class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
                    </a><a class="brand" href="#">My Menu</a>
                    <div class="nav-collapse">
                        <ul class="nav">
                            <li class="active"><a  href="/Home/Dashboard"><i class="icon-home icon-white"></i>Dashboard</a></li>
                            <li ><a href="#" id="taskMainLink">Task</a></li>

                            <li><a href="#" id="contactMainLink">Contact</a></li>

                            <li><a href="#" id="appointmentMainLink">Appointment</a></li>

                            <li><a href="#" id="projectMainLink">Project</a></li>

                            <li><a href="#" id="salesMainLink">Sales</a></li>

                        </ul>

今発行

各タブをマウスクリックでアクティブにし、他のタブを元の状態にする必要があります。現在アクティブなクラスは、デフォルトでダッシュボードです。

タブをクリックするたびにフォローしている構造-

$('.navbar.navbar-fixed-top.navbar-inverse>.container-fluid>.nav-collapse>.nav').click(function(){
$(this).find('li').removeClass('active');
$(this).addClass('active');
});

私は正しいクラスをクラスに入れていますか？私がここで間違っている場合は、正しい解決策を提案してください。

4

3 に答える 3

3

これを試して：

$('ul.nav li a').click(function(){
    $(this).parent().parent().children('.active').removeClass('active');
    $(this.parentNode).addClass('active');
    return false;
});
于 2013-02-09T12:43:38.867 に答える
0

これでうまくいくはずです：

$('ul.nav li a').click(function(e){
    e.preventDefault();
    $(this).parent().find('li.active').removeClass('active');
    $(this).addClass('active');
});
于 2013-02-09T12:42:21.070 に答える
0

これを行うブートストラップbuttonDropdownコンポーネントを使用する方が簡単かもしれないと思います。

これらのボタンのドロップダウンをbuttonGroupsコンポーネントで使用して、ボタンをグループ化し、cssを適用して現在のメニューのように見せてください。

メニューを機能させるために追加のJavaScriptは必要ありません！

于 2013-02-09T12:43:17.030 に答える