Tengo un problema con el arranque de las pestañas en AngularJS.

 <div class="tab-container">
    <ul class="nav nav-tabs">
       <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
       <li><a href="#profile" data-toggle="tab">Profile</a></li>
       <li><a href="#messages" data-toggle="tab">Messages</a></li>
    </ul>
 <div class="tab-content">
    <div class="tab-pane active cont" id="home">
        <h3 class="hthin">Basic Tabs</h3>
        <p>This is an example of tabs </p>
     </div>

     <div class="tab-pane cont" id="profile">
       <h2>Typography</h2>
       <p>This is just an example of content 
     </div>

     <div class="tab-pane" id="messages">..sdfsdfsfsdf.
     </div>
  </div>
</div>

El problema es que al seleccionar una ficha, por ejemplo, de Inicio o de Perfil, yo soy redirigido a /home o /url de perfil en lugar de mostrar el contenido de la propia ficha.

Tengo la sensación de que esto puede ser de alguna manera consigue con una directiva y evitar la redirección a la página de inicio o de perfil, en lugar de mostrar la ficha contenido.

OriginalEl autor David Dury | 2014-11-10

5 Comentarios

  1. 49

    reemplazar href con data-target.

    <li class="active"><a data-target="#home" data-toggle="tab" >Home</a></li>
    Te importa hacer un ejemplo completo de una ficha de trabajo?
    También agregar un espacio en blanco atributo href así cursor muestra el enlace puntero
    Se puede mostrar fácilmente un puntero mediante el uso de CSS {cursor:pointer} no hay necesidad de agregar más marcado @CaptainFantastic

    OriginalEl autor Rej

  2. 9

    Directiva puede ayudarle a manejar.

    app.directive('showTab', function () {
        return {
            link: function (scope, element, attrs) {
                element.click(function (e) {
                    e.preventDefault();
                    jQuery(element).tab('show');
                });
            }
        };
    });
    
    <a show-tab href="#tab_1">
        Tab 1
    </a>

    Fuente

    OriginalEl autor Xyroid

  3. 4

    este código va a resolver el problema, mientras que el uso de Angularjs

    <div class="tabbable tabs-below" ng-init="selectedTab = 1;">
                            <ul class="nav nav-tabs nav-justified">
                                <li ng-class="{active: selectedTab == 1}">
                                    <a href="#" ng-click="selectedTab = 1;">Personal</a>
                                </li>
                                <li ng-class="{active: selectedTab == 2}">
                                    <a href="#" ng-click="selectedTab = 2;">Education</a>
                                </li>
                                <li ng-class="{active: selectedTab == 3}">
                                    <a href="#" ng-click="selectedTab = 3;">Contact</a>
                                </li>
                            </ul>
    
                            <div class="tab-content" ng-show="selectedTab == 1">
                            1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                            </div>
    
                            <div class="tab-content" ng-show="selectedTab == 2">
                            2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                            </div>
    
                            <div class="tab-content" ng-show="selectedTab == 3">
                            3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                            </div>
                        </div>

    OriginalEl autor MSH

  4. 3

    Uso de datos de destino en lugar de la de href

    <div class="page-menu-container">
            <div class="container">
                <div class="page-menu">
                    <ul class="nav nav-tabs">
                        <li><a data-toggle="tab" data-target="#Tab1">Tab1</a></li>
                        <li><a data-toggle="tab" data-target="#Tab2" >Tab2</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="tab-content">
            <div id="Tab1" class="tab-pane fade in active"> Tab1 contant
            </div>
    
             <div id="Tab2" class="tab-pane fade in active"> Tab2 contant
            </div>
    </div>

    OriginalEl autor Saurabh Chandra Patel

Dejar respuesta

Please enter your comment!
Please enter your name here