Change color of tabs by selecting tabs

Question

Change color of tabs by selecting tabs

Asked 6 years, 2 months ago

Viewed 1,419 times

-2

Friends, I have these tabs, I’ve tried some css codes to leave a background color in tabs, but when I use the codes it changes the entire background, I want to change only the color of the tab that this selected.

<html lang="en">

<title>Indicadores</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="icon" type="image/png" href="/img/bighemocinho.png" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- Custom Fonts -->
    <link href="/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- Index-tooltipe-->
    <link href="/styles/index-tooltip.css" rel="stylesheet" type="text/css">

    <!-- search engine -->
    <link rel="canonical" href="https://themes.getbootstrap.com/">

    <!-- DataTables CSS -->
    <link href="/vendor/datatables-plugins/dataTables.bootstrap.css" rel="stylesheet">

    <!-- DataTables Responsive CSS -->
    <link href="/vendor/datatables-responsive/dataTables.responsive.css" rel="stylesheet">

    <!-- Index-menu-hemorrede -->
    <link href="/styles/menu-fortaleza.css" rel="stylesheet" type="text/css">

    <body class="hold-transition skin-blue sidebar-mini">

    <nav class="navbar navbar-inverse" style="background-color: #037c1d;">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/hemoce-indicadores">Indicadores</a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav">
                <li class="">
                    <a class="navbar-links" href="/hemoce-indicadores">Página Inicial</a>
                </li>

            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="#">
                        <span class="glyphicon glyphicon-log-in"></span> Login</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
            <div class="content-wrapper">

                <!-- Main content -->
                <section class="content">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="panel panel-default">

                                <!-- /.panel-heading -->
                                <div class="panel-body">
                                    <div class="row">
                                        <div class="col-lg-12">

                                            <div class="panel panel-default">
                                                    <div class="panel-heading">
                                                        <h3>SELECIONE UM INDICADOR</h3>
                                                    </div>
                                                <!-- /.panel-heading -->
                                                <div class="panel-body">
                                                    <!-- Nav tabs -->
                                                    <ul class="nav nav-tabs">
                                                        <li >
                                                            <a href="#nao-possui-indicador-no-momento" data-toggle="tab">NÃO POSSUI INDICADOR NO MOMENTO</a>
                                                        </li>
                                                        <li>
                                                            <a href="#nao-possui-indicador-no-momento" data-toggle="tab">NÃO POSSUI INDICADOR NO MOMENTO</a>
                                                        </li>
                                                    </ul>                                              
                                                </div>
                                                <!-- /.panel-body -->
                                            </div>
                                            <!-- /.panel -->
                                        </div>
                                    </div>
                                    <!-- /.row (nested) -->
                                </div>
                                <!-- /.panel-body -->
                            </div>
                            <!-- /.panel -->
                        </div>
                        <!-- /.col-lg-12 -->
                    </div>
                    <!-- /.row -->
                </section>
                <!-- /.content -->
            </div>
            <!-- /.content-wrapper -->

            <script src="/js/edit-modal.js"></script>
            <script src="/js/delete-modal.js"></script>
            <script src="/js/add-modal.js"></script>
            <script src="/js/edit-modal-meta-1.js"></script>
            <script src="/js/edit-modal-meta-2.js"></script>

    </body>

</html>

guy edits and puts the full code. This code you put in the question does not help you answer. Put the real HTML and CSS if you’re using JS or jQuery speak...

– hugocsl

2018/04/11 at 14:30

3 answers

2

From what I understand you want to leave the Tab that is active with a correct background color?

To do this, simply style the native Bootstrap3 class

.nav-tabs>li.active>a {
    background-color: #SUA-COR-AQUI !important;
}

Follow the template I made using your code. Just include some code so you can see that the contents of the tabs are changing etc...

.nav-tabs>li.active>a {
    background-color: #037c1d !important;
}

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <!-- Custom Fonts -->
        <link href="/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
        <!-- JSs -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<body class="hold-transition skin-blue sidebar-mini">

    <nav class="navbar navbar-inverse" style="background-color: #037c1d;">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/hemoce-indicadores">Indicadores</a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav">
                <li class="">
                    <a class="navbar-links" href="/hemoce-indicadores">Página Inicial</a>
                </li>

            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="#">
                        <span class="glyphicon glyphicon-log-in"></span> Login</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
            <div class="content-wrapper">

                <!-- Main content -->
                <section class="content">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="panel panel-default">

                                <!-- /.panel-heading -->
                                <div class="panel-body">
                                    <div class="row">
                                        <div class="col-lg-12">
                                            
                                            <div class="panel panel-default">
                                                    <div class="panel-heading">
                                                        <h3>SELECIONE UM INDICADOR</h3>
                                                    </div>
                                                <!-- /.panel-heading -->
                                                <div class="panel-body">
                                                    <!-- Nav tabs -->
                                                    <ul class="nav nav-tabs">
                                                        <li class="active">
                                                            <a href="#momento" data-toggle="tab">NÃO POSSUI MOMENTO1</a>
                                                        </li>
                                                        <li>
                                                            <a href="#momento2" data-toggle="tab">NÃO POSSUI MOMENTO2</a>
                                                        </li>
                                                    </ul>
                                                    <div class="tab-content">
                                                            <div id="momento" class="tab-pane fade in active">
                                                              <h3>HOME</h3>
                                                              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                                            </div>
                                                            <div id="momento2" class="tab-pane fade">
                                                              <h3>Menu 1</h3>
                                                              <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                                            </div>
                                                    </div>                                              
                                                </div>
                                                <!-- /.panel-body -->
                                            </div>
                                            <!-- /.panel -->
                                        </div>
                                    </div>
                                    <!-- /.row (nested) -->
                                </div>
                                <!-- /.panel-body -->
                            </div>
                            <!-- /.panel -->
                        </div>
                        <!-- /.col-lg-12 -->
                    </div>
                    <!-- /.row -->
                </section>
                <!-- /.content -->
            </div>
            <!-- /.content-wrapper -->

 
    </body>

It helped. Thank you!

– Letimberg

2018/04/12 at 14:00
@Letimberg glad it worked out! If my reply has helped you in any way consider marking it as Accept, on this icon below the little arrows on the left side of my reply :)

– hugocsl

2018/04/12 at 14:04

Browser other questions tagged php css twitter-bootstrap bootstrap-3

You are not signed in. Login or sign up in order to post.

by Alan Naicson • 31 points · Answer 1 · 2020-08-29T23:21:42+00:00

I got it this way:

.Nav-item>a. active { background-color: #87CEEB ! Important; }

by White • **384** points · Answer 2 · 2018-04-11T14:23:25+00:00

I think by inserting style can solve the problem.

<div class="panel-body">

<ul class="nav nav-tabs">

<li style="background-color: blue;" selected>
**<a href="#texto" data-toggle="tab">texto</a>**
</li>

<li style="background-color: green;">
**<a href="#texto2" data-toggle="tab">Texto2</a>**
</li>
</ul>