Change the color of the tabs when selecting them

Question

Change the color of the tabs when selecting them

Navigation

#1 by (1 votes)
#2 by (1 votes)

-1

Friends, I have these tabs, I already tried some css codes to leave a background color on the tabs, but when I use the codes it changes the whole background, I want to change only the color of the tab that is 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>

php css twitter-bootstrap bootstrap-3

asked by anonymous 11.04.2018 / 16:17

2 answers

1

I think that 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>

11.04.2018 / 16:23

SQL Search Specifies Use BETWEEN together with IN ()

score 1 · Accepted Answer

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

To do this, simply stylize 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><scriptsrc="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>