मैं जावास्क्रिप्ट

Question

के साथ इन आईडी का उपयोग कैसे करूं? मेरे पास जावास्क्रिप्ट फ़ंक्शन वाली वेबसाइट है जो उपयोगकर्ता द्वारा नेविगेशन आइटम पर क्लिक करते समय पृष्ठ पर अनुभाग पर स्क्रॉल करना चाहिए। मेरे नेविगेशन मेनू में बदलाव करने से पहले इस स्क्रिप्ट ने काम किया। मैं जावास्क्रिप्ट में आईडी के संदर्भ को सही तरीके से संदर्भित करने का तरीका नहीं समझ सकता।

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="sr-only">Toggle Navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">Data Detective</a> 
     </div> 
     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a id="home" href="#homeSect">HOME</a></li> 
       <li><a id="about" href="#aboutSect">ABOUT</a></li> 
       <li><a id="portfolio" href="#portfolioSect">PORTFOLIO</a></li> 
       <li><a id="contact" href="#contactSect">CONTACT</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

यहाँ javaScript है:

$(document).ready(function() { 
setBindings(); 
}); 


//Allow screen to Scroll to selected section 
function setBindings() { 
    $("nav ul li a").click(function (tip) { 
     tip.preventDefault(); 
     var sectionID = "#" + tip.currentTarget.id + "Sect"; 
     alert('button id ' + sectionID); 

     $("html body").animate({ 
      scrollTop: $(sectionID).offset().top 
     }, 1000); 
    }); 
} 

Answer 1

आप .navbar वर्ग का उपयोग करना चाहिए

यहाँ एचटीएमएल एनएवी मेनू है। कृपया बदलने के लिए:

$("nav ul li a").click(function (tip) { 

को

$(".navbar ul li a").click(function (tip) { 

इसके अलावा अधिक, मैं तुम्हें var sectionID = $(this).attr('href'); बजाय var sectionID = "#" + tip.currentTarget.id + "Sect"; उपयोग करने के लिए है क्योंकि यह अधिक बस है सलाह देते हैं।

Answer 2

आपका jQuery चयनकर्ता:

$("nav ul li a") 

तत्व <nav> (जो मौजूद नहीं है) के लिए खोज करेंगे।

$(".nav a") 

Answer 3

मैं एक और अधिक उपयोगी वैश्विक समारोह मुझे लगता है कि क्या करना होगा:

इसके बजाय, आप का भी उपयोग कर सकते हैं। मैं एंकर संदर्भ के साथ किसी भी href की जांच करता हूं, जांचता हूं कि उस आईडी के साथ कोई div है या नहीं, और फिर उस पर स्क्रॉल करें।

इस तरह आप मेनू तक सीमित नहीं हैं लेकिन हर जगह एक ही कोड का उपयोग कर सकते हैं। इसके अलावा मैंने इवेंट कैप्चरर को शीर्ष स्तर का दस्तावेज़ बनाया है, ताकि आप दिल की सामग्री में तत्वों को सम्मिलित और हटा सकें और यह हमेशा रिबाउंड किए बिना काम करेगा।

$(document).on('click','a[href^="#"]',function(e) { 
 
    var target = $(e.currentTarget).attr('href'); 
 
    var $target = $(target); 
 
    
 
    if($target.length > 0) { 
 
     $("html body").animate({  
 
      scrollTop: $target.offset().top 
 
     }, 1000); 
 
    } 
 
});

div.sect { 
 
    margin:50px; 
 
    height:400px; 
 
    width:100%; 
 
    background-color:gray; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<li><a id="blah" href="www.google.nl">Excluded</a></li> 
 
<li><a id="home" href="#homeSect">HOME</a></li> 
 
<li><a id="about" href="#aboutSect">ABOUT</a></li> 
 
<li><a id="portfolio" href="#portfolioSect">PORTFOLIO</a></li> 
 
<li><a id="contact" href="#contactSect">CONTACT</a></li> 
 
<li><a id="blah" href="www.google.nl">Excluded</a></li> 
 

 
<div class="sect" id="portfolioSect"> 
 
    portfolioSect 
 
</div> 
 

 
<div class="sect" id="homeSect"> 
 
    homeSect 
 
</div> 
 
<div class="sect" id="aboutSect"> 
 
    aboutSect 
 
</div> 
 
<div class="sect" id="contactSect"> 
 
    contactSect 
 
</div>