जब मैंने कैनवास तत्व का उपयोग किया तो बूटस्ट्रैप नेवी-लिंक निर्दिष्ट आईडी पर नेविगेट नहीं किया। लेकिन जब मैंने कैनवास को div से बदल दिया, तो एनएवी-लिंक काम कर रहा था लेकिन ग्राफ लोड नहीं हुआ।

यहाँ मेरी वेबसाइट का लिंक है: https://covidupdate.netlify.com/


    <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <nav class="navbar navbar-light bg-light">
                <span class="navbar-brand mb-0 h1">COVID-19: India Stats</span>
            </nav>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse flex-grow-1 text-right" id="navbarSupportedContent">
                <ul class="navbar-nav ml-auto flex-nowrap">
                    <li class="nav-item active">
                        <a class="nav-link" href="#summary-total">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="#table-state-data">State-wise Stats</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="#trends">Spread Trends</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="#helpline">Helpline</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="#helpful-links">Helpful Links</a>
                    </li>
                </ul>
            </div>
        </nav>

<div id="trends" class="w-90-95">
            <h3 class="text-center padding">Spread Trends</h3>
            <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="cumulative-tab" data-toggle="tab" href="#cumulative" role="tab"
                        aria-controls="cumulative" aria-selected="true">Cumulative</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="daily-tab" data-toggle="tab" href="#daily" role="tab" aria-controls="daily"
                        aria-selected="false">Daily</a>
                </li>
            </ul>
            <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="cumulative" role="tabpanel" aria-labelledby="cumulative-tab">
                    <canvas class="padding canvasred" id="confirmedCasesCumulative"></canvas>
                    <canvas class="padding canvasgreen" id="recoveredCumulative"></canvas>
                    <canvas class="padding canvasgrey" id="deathsCumulative"></canvas>
                </div>
                <div class="tab-pane fade" id="daily" role="tabpanel" aria-labelledby="daily-tab">
                    <canvas class="padding canvasred" id="confirmedIncreaseDaily"></canvas>
                    <canvas class="padding canvasgreen" id="recoveredDaily"></canvas>
                    <canvas class="padding canvasgrey" id="deathsDaily"></canvas>
                </div>
            </div>
        </div>


  [1]: https://covidupdate.netlify.com/
-1
Mritunjay Saha 11 अप्रैल 2020, 19:31

1 उत्तर

सबसे बढ़िया उत्तर

आप jQuerys .animate(), .offset() और scrollTop का उपयोग कर सकते हैं। Jquery स्क्रिप्ट जोड़ने के बाद जोड़ें।

<script>
 $(document).ready(function(){
  $( ".navbar-nav .nav-link" ).click(function( event ) {
     event.preventDefault();
     $("html, body").animate({ scrollTop: $($(this).attr("href")).offset().top }, 500);
  });
 });
</script>

साथ ही https://code.jquery.com/jquery-3.4 बदलें। 1.slim.min.js पूर्ण संस्करण के साथ पतला संस्करण https: //code.jquery.com/jquery-3.4.1.min.js

0
Shubham Dogra 11 अप्रैल 2020, 17:39