jquery - 如何使用时间触发器更改事件选项卡颜色。 PHP？

Question

我想用时间触发器更改 ul 中的当前选项卡 li 但不起作用。它正在更改当前选项卡但不能事件选项卡更改颜色，任何人都可以帮助我，任何帮助将不胜感激。

 function Quantitative() {       
        $('#Quantitativetab').trigger('click'); 
        var eng = document.getElementById('EnglishLangImageBox');
        var qua = document.getElementById('QuantitativeLangImageBox');


        var engQue = document.getElementById('English');
        var QuaQue = document.getElementById('Quantitative');

        engQue.style.display='none';
        QuaQue.style.display='block';

    }

时间触发器在这里。

<script>
        // Set the date we're counting down to

        var countDownDate = new Date("Jan 5, 2070 15:37:25").getTime();
        //var countDownDate = new .getTime();
        //alert(countDownDate);
        // Update the count down every 1 second

        var x = setInterval(function() {

            // Get todays date and time
            var now = new Date().getTime();

            // Find the distance between now an the count down date
            var distance = countDownDate - now;

            // Time calculations for days, hours, minutes and seconds

            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);

            // Output the result in an element with id="demo"
            document.getElementById("ttime_count").innerHTML =  minutes + "m " + seconds + "s ";

            // If the count down is over, write some text 
            if (distance < 0) {
                clearInterval(x);
                document.getElementById("ttime_count").innerHTML = "EXPIRED";
            }else if( minutes == 30){
                //$('a#Quantitativetab').trigger('click');
                Quantitative();                     
            }else{
                English();
            }
        }, 1000);       

        </script>

标签代码在这里。

<ul class="nav nav-pills nav-pills-nostyle" id="tabnavBar11" style=" height:auto ; border-top: thin solid #000000; border: thin solid #000000; ">
                                <li id="tabs1" class="active"><a data-toggle="pill" id="Englishtab" href="#English" onclick ="SeeEnglish()" style="border-right: thin solid #000000;">English Language <img src="assets/images/infoico.png" width="20" height="20"></a></li>
                                <li id="tabs2"><a data-toggle="pill" id="Quantitativetab" href="#Quantitative" onclick ="SeeQuantitative()" style="border-right: thin solid #000000;">Quantitative Aptitude <img src="assets/images/infoico.png" width="20" height="20"></a></li>                                                           
                            </ul>

Answer 1

在您的 javascript 中添加此引导内置方法 $().tab(例如 Quantitative() 或 English())，它激活一个选项卡元素和内容容器。

对于您在 function Quantitative() 中的情况

function Quantitative() {
    //$('#Quantitativetab').trigger('click');   
    var eng = document.getElementById('EnglishLangImageBox');
    var qua = document.getElementById('QuantitativeLangImageBox');


    var engQue = document.getElementById('Englishtab');
    var QuaQue = document.getElementById('Quantitativetab');

    engQue.style.display = 'none';
    QuaQue.style.display = 'block';
    $(QuaQue).tab('show');
}

$(document).ready(function() {

  // Set the date we're counting down to

  var countDownDate = new Date("Jan 5, 2070 15:37:25").getTime();
  //var countDownDate = new .getTime();
  //alert(countDownDate);
  // Update the count down every 1 second

  var x = setInterval(function() {

    // Get todays date and time
    var now = new Date().getTime();

    // Find the distance between now an the count down date
    var distance = countDownDate - now;

    // Time calculations for days, hours, minutes and seconds

    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // Output the result in an element with id="demo"
    document.getElementById("ttime_count").innerHTML = minutes + "m " + seconds + "s ";

    // If the count down is over, write some text 
    if (distance < 0) {
      clearInterval(x);
      document.getElementById("ttime_count").innerHTML = "EXPIRED";
    } else if (seconds % 5 > 2) { // Amended by pblyt in order to trigger the change earlier
      //$('a#Quantitativetab').trigger('click');
      Quantitative();
    } else {
      English();
    }
  }, 1000);


  function Quantitative() {
    //$('#Quantitativetab').trigger('click');   
    var eng = document.getElementById('EnglishLangImageBox');
    var qua = document.getElementById('QuantitativeLangImageBox');


    var engQue = document.getElementById('Englishtab');
    var QuaQue = document.getElementById('Quantitativetab');

    engQue.style.display = 'none';
    QuaQue.style.display = 'block';
    $(QuaQue).tab('show');

  }

  function English() {
    //$('#Quantitativetab').trigger('click');   
    var eng = document.getElementById('EnglishLangImageBox');
    var qua = document.getElementById('QuantitativeLangImageBox');


    var engQue = document.getElementById('Englishtab');
    var QuaQue = document.getElementById('Quantitativetab');

    QuaQue.style.display = 'none';
    engQue.style.display = 'block';
    $(engQue).tab('show');

  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

<div class="container">
  <div id="ttime_count"></div>
  <ul class="nav nav-pills nav-pills-nostyle" id="tabnavBar11" style=" height:auto ; border-top: thin solid #000000; border: thin solid #000000; ">
    <li id="tabs1" class="active">
      <a data-toggle="pill" id="Englishtab" href="#English" onclick="" style="border-right: thin solid #000000;">English Language </a>
    </li>
    <li id="tabs2" class="">
      <a data-toggle="pill" id="Quantitativetab" href="#Quantitative" onclick="" style="border-right: thin solid #000000;">Quantitative Aptitude </a>
    </li>
  </ul>
</div>