W3.css JQuery UIプログレスバーとの競合

私はこの最後のストローにいます。私はこれを理解することができず、今は3日ほど試しています。 jQuery UIとjQuery UI.cssでw3.cssを使用しています。W3.css JQuery UIプログレスバーとの競合

問題：進行状況バーは表示されますが、表示されません。 hrefをw3.cssに削除すると、プログレスバーは正常に機能します。しかし、それ以外の場合、塗りつぶしは発生しません。

FIDDLE：http://jsfiddle.net/kjg95pxq/7/

HTML

<body class="w3-content" style="max-width:1300px"> 

    <!-- ROW 3.1: Skillsets Section --> 
    <div class="w3-container"> 

    <div class="progressbar w3-center" id="progressbar" data-value="50"> 
     <p style="position:absolute">20%</p> 
    </div> 
    </div> 

    <div class="w3-row" id="rowWaypoint2"> 
    <div class="capsuleBox3 animated" id="capBox3"> 
     <div class="w3-half w3-dark-grey w3-container w3-center" id="contact" style="height:700px"> 
     <div style="padding-top:55px"> 
      <h1>Skillsets</h1> 
      <p>My current skill progressions</p> 
     </div> 

     <!-- Progress Bar for JavaScript/jQuery --> 

     <div style="padding-top:18px"> 
      <p> Tacos </p> 
     </div> 

     <div style="padding-top:0px"> 
      <div class="progressbar w3-center" data-value="40"> 
      <p style="position:absolute">20%</p> 

      </div> 
     </div> 

     <div class="progressbar w3-center" id="progressbar" data-value="80"> 
      <p style="position:absolute">20%</p> 
     </div> 

     <div class="progressbar w3-center" data-value="20"> 
      <p style="position:absolute">20%</p> 
     </div> 

     </div> 
    </div> 
    </div> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 

</body>

CSS

.progressbar { 
    width: 80%; 
    margin: 20px auto; 
} 

.ui-progressbar-value { 
    transition: width 0.5s; 
    -webkit-transition: width 2s; 
}

$(document).ready(function() { 
    pbRun(); 
    function pbRun() { 
    $(".progressbar").progressbar(); 
    //this initializes the widget 
    $(".progressbar").each(function() { 
     var valPB = parseInt($(this).data('value')); 
     var percentPB = valPB; 
     $(this).progressbar("option", "value", percentPB); 
    }); 
    } 
});

出典

2017-03-23 helpkelp

使用してみてください：

.ui-progressbar .ui-progressbar-value { 
    box-sizing: content-box; 
}

w3.cssが追加されます。コードを台無し

*, *:before, *:after { 
    box-sizing: inherit; 
}

を。

JSfiddle

出典

2017-03-23 19:20:46

私はあなたを愛しています。それがそれでした。どうもありがとうございます！私はこの知識を全員に伝えます。 – helpkelp

ありがとう！また、将来の視聴者に役立たないコメントを削除することはできますか？それはちょうどサイトをよりきれいに保つ:)再びありがとう！ –

W3.css JQuery UIプログレスバーとの競合

答えて

関連する問題