CODEWITHSUNDEEP
javascripthtmlcssangularjs
Miguel Xoel Garcia
Miguel Xoel Garcia

Reputation: 307

href not working as expected

I'm using this snippet from HERE. It looks ok, but when I click on a tab, instead of changing the content of the body (<a href="#tab2success" data-toggle="tab">), it redirects to localhost:9000/#tab2success, which does not exist. How is it possible to achieve this? I just want that when clicking on the tab, it goes to the specific content in the body. Looks like that href is not the solution here...

 <div class="col-md-9">

      <div class="panel with-nav-tabs panel-success">
            <div class="panel-heading">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#tab1success" data-toggle="tab">Success 1</a></li>
                        <li><a href="#tab2success" data-toggle="tab">Success 2</a></li>
                        <li><a href="#tab3success" data-toggle="tab">Success 3</a></li>
                    </ul>
            </div>
            <div class="panel-body">
                <div class="tab-content">
                    <div class="tab-pane fade in active" id="tab1success">Success 1</div>
                    <div class="tab-pane fade" id="tab2success">Success 2</div>
                    <div class="tab-pane fade" id="tab3success">Success 3</div>
                </div>
            </div>

PD: I'm using angularJS, so if there is any directive or something that could help, it may be also a valid option.

EDIT: Part of my router implementation. It's just o part of the code, because it's too longo to post it all..

angular
    .module('Test', [ //setting a module
    'oc.lazyLoad',
    'ui.router',
    'ui.bootstrap',
    'angular-loading-bar'
  ])
    .config(['$stateProvider', '$urlRouterProvider', '$ocLazyLoadProvider', function ($stateProvider, $urlRouterProvider, $ocLazyLoadProvider) {

        $ocLazyLoadProvider.config({
            //$ocLazyLoad returns a promise that will be rejected when there is an error but if you set debug to true,                       //$ocLazyLoad will also log all errors to the console.

            debug: false,
            events: true,
        });

        // For any unmatched url, redirect to '/dashboard/home'
        $urlRouterProvider.otherwise('/dashboard/rank');

        // Now we set up the states
        $stateProvider
            .state('dashboard', { //parent view
                url: '/dashboard',
                templateUrl: 'views/dashboard/main.html',

Upvotes: 1

Views: 792

Answers (3)

Anonymous Duck
Anonymous Duck

Reputation: 2998

This is the normal behavior for href's.

To solve your issue please refer to this article : Nav tabs in Angular

Basically, there is a flag that controls the visibility of tabs and a ng-click event that will update the value for the flag.

Once the value of the model (flag) was updated, it will automatically update the view.

Upvotes: 1

Johnny Kutnowski
Johnny Kutnowski

Reputation: 2390

There is no need for any Angular code or overcomplications. You are just missing the bootstrap.js file that operates the tabs.

Make sure you are using the correct classes of the tab markup, import the JS file at the end of the body of your document, and that's it.

You can read more about the Bootstrap tabs, the markup, and the way they work in the official Bootstrap documentation.

Upvotes: 0

millerbr
millerbr

Reputation: 2961

This is exactly the expected behaviour of href - if you don't supply a full URL, it'll append it onto your current URL (I'm assuming you are using localhost:9000 while developing). Have a look at this link which explains how to use it right, utilising ng-href directive.

To sum it up, you need to use the "handlebars" format inside the ng-href directive:

 <a ng-href="{{/#tab2success}}" data-toggle="tab">

Upvotes: 0

Related Questions