bootstrapV 4.6.0実装ラベルページ(改造v 3.3.3.7)-コード編


文書ディレクトリ
  • 疑問・注意事項:
  • 効果図:
  • すべてのコードを示します:


  • 質問・注意事項:
  • この例ではbootstrap.css.jsは4.6.0バージョンを使用しています.
  • ネット上で4.0+バージョンのは“ラベルのページ”がなくて、3.3.3.7バージョンのは“ラベルのページ”がありますと言います
  • 附:v 3.3.3.7バージョン(機能、スタイル);
  • 自分も公式サイトのドキュメントを見に行って、ラベルページもないことに気づきました(ネット配信は本当だと思います~)、自分で改造しましょう.

  • 4.6.0バージョンのcssソースコードには、v 3.3.3.7のようなラベルページスタイルはありません.【具体的なソースコードは検討する必要があり、本稿では後述しない.】
  • は、clickによって効果をトリガするほか、hover効果に変更することもできます.【具体的には言うまでもなく、各自で改造しよう】
  • 効果図:
    すべてのコードは次のとおりです.
    
    <html>
    <head>
    	<meta charset="UTF-8">
    	<link rel="stylesheet" type="text/css" href="statics/plugin/bt4.6.0/css/bootstrap.min.css"/>
    	<title>title>
    head>
    <body style="width: 500px;margin: 100px auto;">
    <div class="">
        <ul id="myTabs" class="nav nav-pills" role="tablist">
          <li role="presentation" class="active"><a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true"> a>li>
          <li role="presentation" class=""><a href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile" aria-expanded="false">    a>li>
          <li role="presentation" class="dropdown">
            <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown" aria-controls="myTabDrop1-contents">【  】a>
            <ul class="dropdown-menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents">
              <li><a href="#dropdown1" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1">@  a>li>
              <li><a href="#dropdown2" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">@mdoa>li>
            ul>
          li>
        ul>
        <div id="" class="tab-content">
          <div role="tabpanel" class="tab-pane fade active in" id="home" aria-labelledby="home-tab">
        	    111
          div>
          <div role="tabpanel" class="tab-pane fade" id="profile" aria-labelledby="profile-tab">
                222
          div>
          <div role="tabpanel" class="tab-pane fade" id="dropdown1" aria-labelledby="dropdown1-tab">
                333-1
          div>
          <div role="tabpanel" class="tab-pane fade" id="dropdown2" aria-labelledby="dropdown2-tab">
                333-2
          div>
        div>
      div>
    	
    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous">script>
    <script>
    $(function(){
          
    	//$('#myTab a.first').tab('show');//【        tab】
    	$('#myTabs a').click(function (e) {
           //【hover】
    		console.log(e)
    		e.preventDefault()
    		$(this).tab('show');
    		//$(this).tab('show').stop();//【hover  】
    	});
    });
    script>
    body>
    html>
    
    

    以上、「bootstrapV 4.6.0実装ラベルページ(改造v 3.3.3.7)-コード編」についてのすべてです.