Как сделать вкладку нажатой кнопкой?

-5

Я пытаюсь сделать панель навигации доступной. Например, когда пользователь нажимает на данные, открывается веб-страница данных. Но в моем коде я не могу этого сделать. Когда я нажимаю кнопку вкладки, ничего не происходит. Может ли кто-нибудь помочь мне, чтобы при нажатии кнопки вкладки отображается содержимое? Обратите внимание, я использую самозагрузки нав-навигационную панель вкладок Ниже мой код ниже: -Как сделать вкладку нажатой кнопкой?

<head> 

     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <meta name="description" content=""> 
     <meta name="author" content=""> 

     <title>Sales</title> 

     <!-- Bootstrap Core CSS --> 
     <link href="css/bootstrap.min.css" rel="stylesheet"> 

     <!-- Custom CSS --> 
     <link href="css/shop-item.css" rel="stylesheet"> 


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





    </head> 

    <body> 
    <ul class="nav nav-tabs" data-tabs="tabs" id="myTab"> 
    <li class="active"><a data-toggle="tab" href="#home"> Main</a></li> 
    <li><a data-toggle="tab" href="persons/data.html"> data </a></li> 
    <li><a data-toggle="tab" href="teams/teamI.html"> teams </a></li> 
    </ul> 

    <div class="tab-content"> 
    <div id="home" class="tab-pane fade in active"> 
    <div class="container-fluid"> 

      <div class="row"> 

       <div id= "mapContainer" class="col-md-12"> 
        <div id="map-canvas"></div> 
       </div> 
       <div id = "panelContainer" class="col-md-3 hidden"> 
       <div id="right-panel"></div> 
      </div> 
      </div> 

     </div> 

     <!-- /.container --> 

     <div class="container"> 

      <hr> 



     </div> 
    </div> 


     <!-- /.container --> 

     <!-- jQuery --> 
     <script src="js/jquery.js"></script> 

     <!-- Bootstrap Core JavaScript --> 
     <script src="js/bootstrap.min.js"></script> 




    </body> 

    </html>

источник

2016-12-20 Thomas C

ли инициализируем вкладки? –

Вы можете сделать это проще, как показано ниже. Но если вы хотите загрузить другой html на определенные вкладки, используйте jquery.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<ul class="nav nav-tabs" data-tabs="tabs" id="myTab"> 
 
    <li class="active"><a data-toggle="tab" href="#home"> Main</a></li> 
 
    <li><a data-toggle="tab" href="#data"> data </a></li> 
 
    <li><a data-toggle="tab" href="#teams"> teams </a></li> 
 
</ul> 
 

 
    <div class="tab-content"> 
 
    <div id="home" class="tab-pane fade in active"> 
 
    <div class="container"> 
 
     <h1>Home</h1> 
 
    </div> 
 
    </div> 
 
    <div id="data" class="tab-pane fade in"> 
 
    <div class="container"> 
 
     <h1>Data</h1> 
 
    </div> 
 
    </div> 
 
    <div id="teams" class="tab-pane fade in"> 
 
    <div class="container"> 
 
     <h1>Teams</h1> 
 
    </div> 
 
    </div> 
 
    </div>

Обновление: Вы можете также добавить HTML внутри вкладок с помощью JQuery Load функцию.

код выглядит следующим образом:

<ul class="nav nav-tabs" data-tabs="tabs" id="myTab"> 
    <li class="active"><a data-toggle="tab" href="#home"> Main</a></li> 
    <li><a data-toggle="tab" href="#data"> data </a></li> 
    <li><a data-toggle="tab" href="#teams"> teams </a></li> 
</ul> 

    <div class="tab-content"> 
    <div id="home" class="tab-pane fade in active"> 
    <div class="container"> 
     <h1>Home</h1> 
    </div> 
    </div> 
    <div id="data" class="tab-pane fade in"> 
    <div class="container"> 
     <h1>Data</h1> 
    </div> 
    </div> 
    <div id="teams" class="tab-pane fade in"> 
    <div class="container"> 
     <h1>Teams</h1> 
    </div> 
    </div> 
    </div> 
<script> 
    $('#home').load('/home.html'); 
    $('#data').load('/data.html'); 
    $('#teams').load('/teams.html'); 
</script>

источник

2016-12-20 07:17:17 claudios

привет, спасибо за это. И я пытаюсь загрузить различные html-страницы в различные вкладки. Не только контент –

хорошо, я немного смущен. Как использовать jquery? Я не люблю jquery. –

так что это было бы что-то вроде

data

–

Как сделать вкладку нажатой кнопкой?

ответ

Смежные вопросы