Любые предложения о том, как создать этот тип Navigatio - PullRequest
Новая
       14

Любые предложения о том, как создать этот тип Navigatio

1 голос
/ 01 ноября 2011

Если у вас есть опыт работы с Javascript, я буду признателен за помощь.

У меня проблема с попыткой создать меню с вкладками, похожее на то, на которое ссылается скриншот ниже.

enter image description here

По сути, из-за того, что мне нужно включить горизонтальную линию полной ширины под вкладкой заголовка, я не могу получить первую вкладку, чтобы удалить ее активный стиль после удаления одной из других вкладок.

Итак, мой вопрос: как я могу отделить первую вкладку от других с полной длиной

, не создавая два разных меню.

Кстати, я знаю, что это запутанное объяснение, и понимаю, что, возможно, я делаю это совершенно неправильно, но поэтому я ищу вашу помощь:)

Вот как я пытаюсь сделать это до сих пор: 

<script>

$(document).ready(function() {

    /* Tabs Activiation
    ================================================== */

    var tabs = $('.tabs');

    tabs.each(function(i) {

        //Get all tabs
        var tab = $(this).find('> a');
        tab.click(function(e) {

            //Get Location of tab's content
            var contentLocation = $(this).attr('href');

            //Let go if not a hashed one
            if(contentLocation.charAt(0)=="#") {

                e.preventDefault();

                //Make Tab Active
                tab.removeClass('active');
                $(this).addClass('active');

                //Show Tab Content & add active class
                $(contentLocation).show().addClass('active').siblings().hide().removeClass('active');

            }
        });
    });
});

</script>
                <!-- Tabs -->
                <nav id="tab-nav" class="grid3">                            
                    <h1 class="tabs">
                        <a class="active" href="#tab1">Tab 1 (H1)</a>
                    </h1>
                </nav>

                <hr />

                <!-- Tabs -->               
                <nav id="tab-nav" class="grid3">                            
                    <div class="tabs">          
                        <a href="#tab2">Tab 2</a>
                        <a href="#tab3">Tab 3</a>
                    </div>      
                </nav>

                <!-- Tab Content -->
                <ul class="tabs-content grid6"> 
                    <li class="active" id="tab1">Tab 1 Content</li> 
                    <li id="tab2">Tab 4 Content</li>
                    <li id="tab3">Tab3 Content</li>
                </ul>

1 Ответ

1 голос
/ 01 ноября 2011

Итак, я сделал рабочую модель ... использует jQuery, но не хеш-теги

http://jsfiddle.net/nenvG/31/

Я думаю, что проще добавлять контент, не нужно переставлять html для каждого из элементов.

...