CODEWITHSUNDEEP
htmlbootstrap-4navbootstrap-5nav-pills
massideux
massideux

Reputation: 185

Bootstrap Nav-pills not working correctly

I am using one main nav-menu and then a second nav-menu, the content for all these are within the same div.

Once I enter the page, Profile is active on default which is correct, I can then enter Test which then becomes active, as expected.

However, once I click on Edit both Edit and the last nav-item inside the Main Nav-menu is active. Edit then remains active, despite clicking on Profile or Test. This means I have to refresh the page to remove the active-state and in order to see the content inside Edit again.

Any suggestions on what's wrong with this structure?

<div class="container">

<!-- Second Nav-menu -->
<div class="col-lg-4">
    <div class="container-fluid">
        <ul class="nav nav-pills nav-justified">
            <li class="nav-item">
                <a href="#" data-target="#edit" data-toggle="pill" class="nav-link edit">
                <span>Edit info</span>
                </a>
            </li>
        </ul>
    </div>
</div>
<!-- End of second Nav-Menu -->

<!-- Main Nav-menu -->
<ul class="nav nav-pills nav-justified">
    <li class="nav-item">
        <a href="#profile" data-target="#profile" data-toggle="pill" class="nav-link active show profile">
            <span>Profile</span></a>
    </li>
    <li class="nav-item">
        <a href="#test" data-target="#test" data-toggle="pill" class="nav-link test">
            <span>Test</span></a>
    </li>
</ul>
<!-- End of main Nav-menu -->

<!-- Tab content -->
<div class="tab-content">

    <div class="tab-pane" id="edit" name="edit">
        <div class="col-md-12">
            <h2>Edit-tab</h2>
        </div>
    </div>
    
    <div class="tab-pane active show" id="profile">
        <div class="col-md-12">
            <h3>Profile-tab</h3>    
        </div>
    </div>

    <div class="tab-pane" id="test">
        <div class="col-md-12">
            <h2>Test-tab</h2>
        </div>
    </div>
   
</div> 
<!-- Tab content end-tag -->

</div>

Upvotes: 0

Views: 2194

Answers (1)

Claudio
Claudio

Reputation: 296

In BS4 a button becomes active when the ACTIVE class is added to it. Inside the nav tag, the "profile" button is activated by default and when you press the "test" button, "profile" button turns off, assigning the ACTIVE class to test. In this way you can show which menu is active each time.

However "Edit info" is in another nav, where this button is the only element. That's why you have no way to turn it off since there is no other button that turns on and off the previous one. This operation is typical of the navs in BS4 and is done automatically by means of a javascript code.

To turn off ACTIVE you must delete the ACTIVE class. The simplest thing is to do it by means of a javascript that is activated when an event occurs.

I leave you an example where when pressing the button "shutdown" the javascritp is activated and the ACTIVE class is eliminated. This can be associated with a button or any other event that calls this function.

The code could be the following

<div class="container">
    <!-- Second Nav-menu -->
    <div class="col-lg-4">
        <div class="container-fluid">
            <ul id="1" class="nav nav-pills nav-justified">
                <li class="nav-item">
                    <a href="#" data-target="#edit" data-toggle="pill" class="nav-link edit">
                        <span>Edit info</span>
                    </a>
                </li>
            </ul>
            <a href="#" data-target="#edit" data-toggle="pill" class="nav-link apagar">
                <span>apagar</span>
            </a>
        </div>
    </div>
    <!-- End of second Nav-Menu -->
    <!-- Main Nav-menu -->
    <ul id="2" class="nav nav-pills nav-justified">
        <li class="nav-item">
            <a href="#profile" data-target="#profile" data-toggle="pill" class="nav-link active show profile">
                <span>Profile</span>
            </a>
        </li>
        <li class="nav-item">
            <a href="#test" data-target="#test" data-toggle="pill" class="nav-link test">
                <span>Test</span>
            </a>
        </li>
    </ul>
    <!-- End of main Nav-menu -->
    <!-- Tab content -->
    <div class="tab-content">
        <div class="tab-pane" id="edit" name="edit">
            <div class="col-md-12">
                <h2>Edit-tab</h2>
            </div>
        </div>
        <div class="tab-pane active show" id="profile">
            <div class="col-md-12">
                <h3>Profile-tab</h3>
            </div>
        </div>
        <div class="tab-pane" id="test">
            <div class="col-md-12">
                <h2>Test-tab</h2>
            </div>
        </div>
    </div>
    <!-- Tab content end-tag -->
</div>


<script>
    $(function() {
        $(".apagar").click(function() {
            $(".edit").removeClass('active');
        });
    });
</script>

Good luck

Upvotes: 1

Related Questions