Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Применение библиотек > спрятать програмно элемент таба

Автор: mstdmstd 13.7.2016, 13:40

Всем привет,
Нужно програмно получить список закладок таба и один из них спрятать :

Код


        var ul_tabs= $('#ul_tabs');

        var children=ul_tabs.children(); // Все элементы таба

        children.each(function(idx, val){
            alert( "idx::"+var_dump(idx) )
            alert( "val.innerHTML::"+var_dump(val.innerHTML) + "  :  "+var_dump(val))

            if ( jQuery.trim(val.innerHTML) == "" ) {  // Это искомый мой элемент - я хочу спрятать его !!!
                alert( "+++++idx::"+var_dump(idx) )
                alert( "+++++val::"+var_dump(val) ) // Это вывод на экран нужного элемента(его спойлер ниже)
                alert( "+++++val.nextElementSibling ::"+var_dump(val.nextElementSibling ) )
                alert( "+++++val.children ::"+var_dump(val.children ) )
                alert( "+++++val.firstChild ::"+var_dump(val.firstChild ) )
                alert( "+++++val.lastChild  ::"+var_dump(val.lastChild  ) )
                val.style.display= "none" // ЭТОТ КОД ОШИБКИ НЕ ВЫДАЕТ - то мой элемент не прячется

                val.css("display","none") // эта строка выдает ошибку TypeError: val.css is not a functionval.css("display","none")

Непонятно. почему валит ошибку val.css и почему не срабатывает val.style.display= "none" и как и переменной в цикле val получить валидный javascript - обьект?
Код нужного элемента val:
http://pastebin.com/EJtVSGg4

Спасибо !

Автор: mstdmstd 16.7.2016, 15:12

Проблема по-прежнему актуальна, Чуть подробнее :
На странице бутстрапа используются таб(с 3мя закладками - http://getbootstrap.com/javascript/#tabs) и карусель(http://bootsnipp.com/snippets/featured/responsive-moving-box-carousel) и каким-то образом на закладках перед первой закладкой появляется область, которая выделяется как область active.
Оба компонента текущую страницу(закладку) определяют через класс active
На этой ссылке
http://dev4.softreactor.com//hostel/victoria/melbourne-region/inner-city/standard-hostel
На закладках ниже заголовка"Useful Information"
над пунктом "About Us" появился белый блок
В firebug я вижу код:

Код


<li class="active" role="presentation">
  <a class="" href="#images_carousel" data-slide="next"></a>
  <a data-toggle="tab" role="tab" aria-controls="tab_about_us" href="#tab_about_us">
    About Us
  </a>
</li>

Хотя изначально код таба :

Код


        <div id="div_information_info" >
            <div class="hostel_title" id="tabs_useful_information">Useful Information</div>

                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist"  id="ul_tabs" >
                    <li role="presentation" class="active">
                        <a href="#tab_about_us" aria-controls="tab_about_us" role="tab" data-toggle="tab">
                            About Us
                        </a>
                    </li>
                    <li role="presentation">
                        <a href="#tab_cancellation_policy" aria-controls="tab_cancellation_policy" role="tab" data-toggle="tab">
                            Cancellation Policy
                        </a>
                    </li>
                    <li role="presentation">
                        <a href="#tab_must_read_information" aria-controls="tab_must_read_information" role="tab" data-toggle="tab">
                            Must Read Information
                        </a>
                    </li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="tab_about_us">
                        <article class="hostel_long_text">{{ Hostel.about_us|nl2br|stripslashes | raw}}</article>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="tab_cancellation_policy">
                        <article class="hostel_long_text">{{ Hostel.cancellation_policy|nl2br|stripslashes | raw }}</article>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="tab_must_read_information">
                        <article class="hostel_long_text">{{ Hostel.must_read_information|nl2br|stripslashes | raw }}</article>
                    </div>
                </div>

        </div>

Каким-то образом туда пристроилась строка - я такого не писал

Код


<a class="" href="#images_carousel" data-slide="next"></a>

Если не отобрабражать карусель с картинками - то табы отображаются нормально

Так инициализиреутся карусель

Код


        $('#images_carousel').carousel({
            interval: 6000
        })

Как это побороть и есть ли возможность определить разные классы для активных элементов разных компонентов, которые обычно active ?

У меня в проектое подключен bootstrap.min.js

Я открыл bootstrap.js
И в определении табуляции строки

Код


    if ($this.parent('li').hasClass('active')) return

    var $previous = $ul.find('.active:last a')

В определении карусели:

Код


  Carousel.prototype.to = function (pos) {
    var that        = this
    var activeIndex = this.getItemIndex(this.$active = this.$element.find('.item.active'))


...
    if ($next.hasClass('active')) return (this.sliding = false)

То есть оба компонента отсылаются к одному классу active и вариант решения редактировать этот файл - что не лучшее решение, имхо.
Также просмотрев код этого файла я вижу что класс active также используется плагином ScrollSpy, то есть использование на одной странице 2 плагинов может привести к конфликту

2) Я попробовал после инициализации компонентов спрятать этот ненужный мне код:

и делаю :

Код


    jQuery(document).ready(function ($) {
        ...
        setTimeout(function() {
            initTab()
        }, 2000);

    ...
    function initTab () {
        var ul_tabs= $('#ul_tabs');
        alert( "ul_tabs::"+var_dump(ul_tabs) )

//        ul_tabs.find( "a" ).css( "background-color", "red" );


        var children=ul_tabs.children();

        children.each(function(idx, val){
            alert( "idx::"+var_dump(idx) )
            alert( "val.innerHTML::"+var_dump(val.innerHTML) + "  :  "+var_dump(val))
//            alert( "idx,ownerDocument::"+var_dump( typeof idx.ownerDocument) )
//            alert( "idx,ownerDocument::"+var_dump(typeof idx.ownerDocument) )
//            alert( "idx.parentNode::"+var_dump( typeof idx.parentElement) )

            if ( jQuery.trim(val.innerHTML) == "" ) {  // Это искомый лишний элемент - я хочу спрятать его !!!
                alert( "+++++idx::"+var_dump(idx) )
                alert( "+++++val::"+var_dump(val) )    // Это вывод на экран нужного элемента(его спойлер ниже)
//                alert( "+++++val.nextElementSibling ::"+var_dump(val.nextElementSibling ) )
//                alert( "+++++val.children ::"+var_dump(val.children ) )
//                alert( "+++++val.firstChild ::"+var_dump(val.firstChild ) )
//                alert( "+++++val.lastChild  ::"+var_dump(val.lastChild  ) )
                val.style.display= "none"  // ЭТОТ КОД ОШИБКИ НЕ ВЫДАЕТ - но элемент не прячется
                val.css("display","none") // эта строка выдает ошибку TypeError: val.css is not a functionval.css("display","none")

            }
        });

Непонятно. почему валит ошибку val.css и почему не срабатывает val.style.display= "none" и как и переменной в цикле val получить валидный обьект?
Код элемента алертом:
http://pastebin.com/EJtVSGg4

Автор: mstdmstd 19.7.2016, 12:44

Методом тыка решение нашел в том, чтобы создать первый фиктивный таб :

Код


                <ul class="nav nav-tabs" role="tablist" id="ul_tabs">
                    <li role="presentation" class="active" id="li_tab_empty">
                        <a href="#tab_empty" aria-controls="tab_empty" role="tab" data-toggle="tab"></a>
                    </li>
                    <li role="presentation" class="active" id="li_tab_about_us">
                        <a href="#tab_about_us" aria-controls="tab_about_us" role="tab" data-toggle="tab">
                            About Us
                        </a>
                </li>

И по загрузке страницы прятать именно этот фиктивный таб :

Код


        var ul_tabs= $('#ul_tabs');
        var childs=ul_tabs.children();
        for (var i = 0; i <= childs.length - 1; i++) {
            if ( i == 1 ) {
                childs[i].style.display = "none"
            }
        }

Если прятать имеено создаваемый ненужный мне таб:

Код


            if ( i == 0 ) {

то не работает...
Из имеющихся в моем Ubuntu браузерах нормально работает в Chromium, Firefox, Opera
В Konqueror не работает( да и не сильно надо )

Кому не сложно и кто под виндой проверьте пожалуйста в IE
http://dev4.softreactor.com//hostel/victoria/melbourne-region/inner-city/standard-hostel
таб под тестом "Useful Information" должен нормально отображаться без пустых блоков cлева и миганий при загрузке...