Подчеркните движение при нажатии следующей кнопки во вкладках - PullRequest
Новая
       1

Подчеркните движение при нажатии следующей кнопки во вкладках

0 голосов
/ 07 февраля 2020

Мне нужно подчеркнуть, когда следующая кнопка нажата в заголовке вкладки. Если щелкнуть вкладку, подчеркивание будет работать правильно, но если мы нажмем кнопку «Далее», оно останется на вкладке «Около» и не перейдет на следующую вкладку. Пожалуйста, помогите мне переместить подчеркивание на следующую вкладку. Заранее спасибо

Вот мой код вкладки, которая отображает содержимое. 

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
 body {font-family: Arial;}

  /* Style the tab */
.tab {
 overflow: hidden;
 border: 1px solid #ccc;
 background-color: #f1f1f1;
  }

  /* Style the buttons inside the tab */
  .tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
 transition: 0.3s;
 font-size: 17px;
  }

  /* Change background color of buttons on hover */
  .tab button:hover {

  }

  /* Create an active/current tablink class */
 .tab button.active {
 text-decoration: underline;
 text-decoration-thickness: 2px;
 text-decoration-color: #6A72EA;
 padding-bottom:2px;
 display:inline-block;
  }


  /* Style the tab content */
  .tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
 border-top: none;
  }

 #con {
 width: 370px;
 margin: auto;

      }
   .bgc{
   background-color: #6A72EA;
   color: white;
   text-align:center;
   margin-bottom: -16px;
   padding: 10px;
   border-radius:15px;
   }
   </style>
   </head>
   <body>

  <h2>Tabs</h2>
  <p>Click on the buttons inside the tabbed menu:</p>
  <div id = "con" >
  <div class="bgc">
  <p>
      Let's create you personal nutritional profile to determine your Macros & keep track of how much you should eat,which helps you to achieve your body goals!
    </p>
   </div>
   <div class="tab">
    <button class="tablinks" onclick="openTab(event, 'About')">About</button>
   <button class="tablinks" onclick="openTab(event, 'Activity level')">Activity level</button>
   <button class="tablinks" onclick="openTab(event, 'Goals')">Goals</button>
    <button class="tablinks" onclick="openTab(event, 'Result')">Result</button>
    </div>

  <div id="About" class="tabcontent">
  <h3>About</h3>
  <p>Say some thing about yourself.</p>


    </div>

   <div id="Activity level" class="tabcontent">
   <h3>Activity level</h3>
   <p>How active are you?</p>
   </div>

   <div id="Goals" class="tabcontent">
   <h3>Goals</h3>
   <p>What is your goal</p>
   </div>
   <div id="Result" class="tabcontent">
   <h3>Result</h3>
   <p>This is the  New Result.</p>
  </div>
  </div>
 <script>
 function openTab(evt, tabName) {
 var i, tabcontent, tablinks;
 tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
  tabcontent[i].style.display = "none";
   }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
  tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
   document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
    }
   </script>

  </body>
  </html>

Ответы [ 2 ]

0 голосов
/ 07 февраля 2020

Я добавил подчеркивания. 

<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


    <style>
        body {
            font-family: Arial;
        }

        /* Style the tab */

        .tab {
            overflow: hidden;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }

        /* Style the buttons inside the tab */

        .tab button {
            background-color: inherit;
            float: left;
            border: none;
            outline: none;
            cursor: pointer;
            padding: 14px 16px;
            transition: 0.3s;
            font-size: 17px;
        }

        /* Change background color of buttons on hover */

        .tab button:hover {}

        /* Create an active/current tablink class */

        .tab button.active {
            text-decoration: underline;
            text-decoration-thickness: 2px;
            text-decoration-color: #6A72EA;
            padding-bottom: 2px;
            display: inline-block;
        }


        /* Style the tab content */

        .tabcontent {
            display: none;
            padding: 6px 12px;
            border: 1px solid #ccc;
            border-top: none;
        }

        #con {
            width: 370px;
            margin: auto;

        }

        .bgc {
            background-color: #6A72EA;
            color: white;
            text-align: center;
            margin-bottom: -16px;
            padding: 10px;
            border-radius: 15px;
        }
    </style>
</head>

<body>

    <h2>Tabs</h2>
    <p>Click on the buttons inside the tabbed menu:</p>
	
	  <button class="bgc" id="next" onclick="nextTab()">Next</button>
	  
	  
    <div id="con">
        <div class="bgc">
            <p>
                Let's create you personal nutritional profile to determine your Macros & keep track of how much you should eat,which helps
                you to achieve your body goals!
            </p>
			
			  
				
				
        </div>
        <div class="tab">
            <button class="tablinks" data-target="About" id="buttonAbout">About</button>
            <button class="tablinks" data-target="Activity" id="buttonActivity">Activity level</button>
            <button class="tablinks" data-target="Goals" id="buttonGoals">Goals</button>
            <button class="tablinks" data-target="Result" id="buttonResult">Result</button>
        </div>

        <div id="About" data-target="buttonAbout" class="tabcontent tabcontent-about">
            <h3>About</h3>
            <p>Say some thing about yourself.</p>


        </div>

        <div id="Activity" data-target="buttonActivity" class="tabcontent tabcontent-activity">
            <h3>Activity level</h3>
            <p>How active are you?</p>
        </div>

        <div id="Goals" data-target="buttonGoals" class="tabcontent tabcontent-goals">
            <h3>Goals</h3>
            <p>What is your goal</p>
        </div>
        <div id="Result" data-target="buttonResult" class="tabcontent tabcontent-result">
            <h3>Result</h3>
            <p>This is the New Result.</p>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous"></script>
    <script type="text/javascript">

        var activeTopic = "buttonAbout";


        function nextTab() {
            var id = $('.tabcontent:visible').attr('id');
            if (id) {

                $('.tabcontent:visible').next('.tabcontent').show();
                activeTopic = $("#" + id).next('.tabcontent').attr("data-target");
                let currentBox = document.getElementById(id);
                var button = $("#" + id).next('.tablinks').attr("id");
                $(".tablinks").removeClass("active");
                $("#" + activeTopic).addClass("active");
                $('#' + id).hide();
            } else {
                $(".tablinks").removeClass("active");
                $("#buttonAbout").addClass("active");
                $('#About').show();
            }
        }

        $(".tablinks").on("click", function (event) {
            var target = $(this).attr("data-target");
            activeTopic = target;
            console.log(activeTopic);
            $(".tablinks").removeClass("active");
            $(this).addClass("active");
            $(".tabcontent").hide();
            $("#" + target).show();
            $("#" + target).addClass("active");
        });
    </script>

</body>

</html>
0 голосов
/ 07 февраля 2020

Попробуйте это 

  <html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial;}

/* Style the tab */
 .tab {
  overflow: hidden;
   border: 1px solid #ccc;
   background-color: #f1f1f1;
     }

   /* Style the buttons inside the tab */
  .tab button {
   background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
  }

 /* Change background color of buttons on hover */
 .tab button:hover {

 }

  /* Create an active/current tablink class */
 .tab button.active {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: #6A72EA;
  padding-bottom:2px;
  display:inline-block;
  }


 /* Style the tab content */
.tabcontent {
  display: none;
 padding: 6px 12px;
 border: 1px solid #ccc;
 border-top: none;
 }

 #con {
 width: 370px;
 margin: auto;

  }
 .bgc{
 background-color: #6A72EA;
 color: white;
 text-align:center;
 margin-bottom: -16px;
 padding: 10px;
 border-radius:15px;
   }
  </style>
  </head>
  <body>

 <h2>Tabs</h2>
 <p>Click on the buttons inside the tabbed menu:</p>
 <div id = "con" >
 <div class="bgc">
 <p>
   Let's create you personal nutritional profile to determine your Macros & keep track of how much you should eat,which helps you to achieve your body goals!
 </p>
  </div>
 <div class="tab">
 <button class="tablinks About" onclick="openTab(event, 'About')">About</button>
 <button class="tablinks Activity" onclick="openTab(event, 'Activity level')">Activity level</button>
 <button class="tablinks Goals" onclick="openTab(event, 'Goals')">Goals</button>
 <button class="tablinks Result" onclick="openTab(event, 'Result')">Result</button>
 </div>

<div id="About" class="tabcontent">
<h3>About</h3>
<p>Say some thing about yourself.</p>


</div>

 <div id="Activity" class="tabcontent">
  <h3>Activity level</h3>
  <p>How active are you?</p>
  </div>

  <div id="Goals" class="tabcontent">
  <h3>Goals</h3>
  <p>What is your goal</p>
  </div>
<div id="Result" class="tabcontent">
<h3>Result</h3>
<p>This is the  New Result.</p>
</div>
</div>
<button id="next" onclick="nextTab()">Next</button>
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<script type="text/javascript">
  function nextTab(){
    $('button.tablinks').removeClass('active');
    var id=$('.tabcontent:visible').attr('id');
    if(id){
       $('.tabcontent:visible').next('.tabcontent').show();
      $('#'+id).hide();
      id=$('.tabcontent:visible').attr('id');
      $('button.tablinks.'+id).addClass('active');
    }else{
      $('#About').show();
       $('button.tablinks.about').addClass('active');
    }



  }
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
 for (i = 0; i < tabcontent.length; i++) {
  tabcontent[i].style.display = "none";
   }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
  tablinks[i].className = tablinks[i].className.replace(" active", "");
   }
   document.getElementById(tabName).style.display = "block";
   evt.currentTarget.className += " active";
   }
  </script>

  </body>
  </html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...