JQuery Klasse für Navigationsleiste hinzufügen/entfernen

Question

So habe ich ein Navigationsleistenmenü. Der Standard der Website befindet sich auf der Seite "Info". Aber was ich versuche zu erreichen ist, dass wenn ich auf einen anderen Menüeintrag wie Experience klicke, ich möchte, dass der About-Absatz in den Absatz für Experience geändert wird. Ich denke, das ist sehr einfach, aber ich kann es nicht richtig machen.

Danke für Ihre Hilfe! Dies ist, wie mein html aussieht:

<nav id="nav-bar"> 
    <ul> 
    <li><a href="#about">About Me</a></li> 
    <li><a href="#experience">Experience</a></li> 
    <li><a href="#education">Education</a></li> 
    <li><a href="#contact">Contact</a></li> 
    </ul> 
</nav> 

<div class="title"> 
    <p><span style="font-size:55px;">—</span>&nbsp;&nbsp;Jennifer</p> 
</div> 

<div class="jenpic"> 
    <img src="jen_1.svg" alt="" /> 
    <div class="vr">&nbsp;</div> 
</div> 


<div id="text"> 
    <div class="bio"> 
    <p>blah blah blah</p> 
    </div> 

    <div class="experience" style="display:none"> 
    <p>blah blah blah</p> 
    </div> 

    <div class="education" style="display:none"> 
    <p>blah blah blah</p> 
    </div> 

    <div class="contact" style="display:none"> 
    <p>blah blah blah</p> 
    </div> 
</div> 

Answer 1

Das ist ziemlich einfach. Hier ist ein funktionierendes Schnipsel:

$("#about").click(function() { 
 
    $(".experience").hide(); 
 
    $(".education").hide(); 
 
    $(".contact").hide(); 
 
    $(".bio").show(); 
 
    }); 
 

 
$("#exp").click(function() { 
 
    $(".bio").hide(); 
 
    $(".education").hide(); 
 
    $(".contact").hide(); 
 
    $(".experience").show(); 
 
    }); 
 

 
$("#edc").click(function() { 
 
    $(".bio").hide(); 
 
    $(".experience").hide(); 
 
    $(".contact").hide(); 
 
    $(".education").show(); 
 
    }); 
 

 
$("#con").click(function() { 
 
    $(".bio").hide(); 
 
    $(".education").hide(); 
 
    $(".experience").hide(); 
 
    $(".contact").show(); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav id="nav-bar"> 
 
    <ul> 
 
    <li id="about"><a href="#about" >About Me</a></li> 
 
    <li id="exp"><a href="#experience">Experience</a></li> 
 
    <li id="edc"><a href="#education" >Education</a></li> 
 
    <li id="con"><a href="#contact" >Contact</a></li> 
 
    </ul> 
 
</nav> 
 

 
<div class="title"> 
 
    <p><span style="font-size:55px;">—</span>&nbsp;&nbsp;Jennifer</p> 
 
</div> 
 

 
<div class="jenpic"> 
 
    <img src="jen_1.svg" alt="" /> 
 
    <div class="vr">&nbsp;</div> 
 
</div> 
 

 

 
<div id="text"> 
 
    <div class="bio"> 
 
    <p>Hi, I’m Jennifer! I am a Speech-Language 
 
     Pathologist providing private speech and 
 
     language services to the pediatric population.</p> 
 
    </div> 
 

 
    <div class="experience" style="display:none"> 
 
    <p>Prompt I & II trained. Experienced in evaluating, diagnosing and treating speech sound disorders (including articulation, dysarthria, apraxia of speech, phonological), fluency disorders (stuttering), language delays/disorders and pragmatic (social) language weaknesses. Experienced in implementing and training AAC (augmentative and alternative communication) for nonverbal/emerging communicators. Skilled in working with ASD (Autism Spectrum Disorders) & a variety of developmental/medical conditions.</p> 
 
    </div> 
 

 
    <div class="education" style="display:none"> 
 
    <p>Hi, I’m Jennifer! I am a Speech-Language 
 
     Pathologist providing private speech and 
 
     language services to the pediatric population.</p> 
 
    </div> 
 

 
    <div class="contact" style="display:none"> 
 
    <p>Hi, I’m Jennifer! I am a Speech-Language 
 
     Pathologist providing private speech and 
 
     language services to the pediatric population.</p> 
 
    </div> 
 
</div>

Jedes Mal, wenn eine Menütaste geklickt wird, es versteckt sich der ganze Rest und zeigt die eine, die angeklickt wird. Ich hoffe das hilft!

Matt

Answer 2

Sie können wie diese es mit jQuery tun, gibt es keine Notwendigkeit von "display: none;":

$(document).ready(function() { 
    $(".experience").hide(); 
    $(".education").hide(); 
    $(".contact").hide(); 

$("#eduNavItem").click(function() { 
    $(".bio").hide(); 
    $(".education").show(); 
}); 

}); 

#eduNavItem die ID der Bildung wäre Element in der Navigationsleiste.

Answer 3

Ich würde versuchen, es zu machen, so können Sie schnell weitere Links und Bereiche hinzufügen. Fügen Sie jedem Abschnitt eine Klasse hinzu, damit Sie sie alle gleichzeitig ausblenden können.

Verwenden Sie dann die href, um den richtigen Abschnitt zu finden. (Ich habe Ihre "Bio" div bis etwa veränderte die href anzupassen.

Javascript

$(document).ready(function() { 
    $sections = $('.js-section'); 
    $('#nav-bar a').on('click', function() { 
    var ref = $(this).attr('href').replace('#',''); 
    $sections.hide(); 
    $("." + ref).show(); 
    }); 
}); 

Html

<nav id="nav-bar"> 
    <ul> 
     <li><a href="#about">About Me</a></li> 
     <li><a href="#experience">Experience</a></li> 
     <li><a href="#education">Education</a></li> 
     <li><a href="#contact">Contact</a></li> 
    </ul> 
</nav> 

<div class="title"> 
    <p><span style="font-size:55px;">—</span>&nbsp;&nbsp;name of person</p> 
</div> 

<div class="jenpic"> 
    <img src="blah.svg" alt="" /> 
    <div class="vr">&nbsp;</div> 
</div> 

<div id="text"> 
    <div class="about js-section"> 
     <p>blah blah about</p> 
    </div> 
    <div class="experience js-section" style="display:none"> 
     <p>blah blah experience</p> 
    </div> 
    <div class="education js-section" style="display:none"> 
     <p>blah blah education</p> 
    </div> 
    <div class="contact js-section" style="display:none"> 
     <p>blah blah contact</p> 
    </div> 
</div> 

Answer 4

ich Ihren Code ändern würde unten ähnlich zu sein. Der Vorteil Das bedeutet, dass Sie Ihre Website weiter entwickeln können und der Code nie geändert werden muss. Mithilfe des Datenzielelements können Sie das Element mit dem Text gezielt ansprechen. Hoffen Sie, dass Sie Fragen haben, die Sie haben könnten. Ich bin glücklich zu helfen!

$(document).ready(function(){ 
 
\t $('nav#nav-bar a').on('click',function(){ 
 
\t \t $('.active').removeClass('active'); 
 
\t \t $($(this).attr('data-target')).addClass('active'); 
 
\t }) 
 

 
})

#text > div { 
 
\t display:none; 
 
} 
 

 
.active { 
 
\t display: block !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav id="nav-bar"> 
 
    <ul> 
 
    <li><a href="#about" data-target="#bio">About Me</a></li> 
 
    <li><a href="#experience" data-target="#experience">Experience</a></li> 
 
    <li><a href="#education" data-target="#education">Education</a></li> 
 
    <li><a href="#contact" data-target="#contact">Contact</a></li> 
 
    </ul> 
 
</nav> 
 

 
<div class="title"> 
 
    <p><span style="font-size:55px;">—</span>&nbsp;&nbsp;Jennifer</p> 
 
</div> 
 

 
<div class="jenpic"> 
 
    <img src="jen_1.svg" alt="" /> 
 
    <div class="vr">&nbsp;</div> 
 
</div> 
 

 

 
<div id="text"> 
 
    <div id='bio' class="active"> 
 
    <p>Hi, I’m Jennifer! I am a Speech-Language 
 
     Pathologist providing private speech and 
 
     language services to the pediatric population.</p> 
 
    </div> 
 

 
    <div id="experience"> 
 
    <p>Prompt I & II trained. Experienced in evaluating, diagnosing and treating speech sound disorders (including articulation, dysarthria, apraxia of speech, phonological), fluency disorders (stuttering), language delays/disorders and pragmatic (social) language weaknesses. Experienced in implementing and training AAC (augmentative and alternative communication) for nonverbal/emerging communicators. Skilled in working with ASD (Autism Spectrum Disorders) & a variety of developmental/medical conditions.</p> 
 
    </div> 
 

 
    <div id="education"> 
 
    <p>Hi, I’m Jennifer! I am a Speech-Language 
 
     Pathologist providing private speech and 
 
     language services to the pediatric population.</p> 
 
    </div> 
 

 
    <div id="contact"> 
 
    <p>Hi, I’m Jennifer! I am a Speech-Language 
 
     Pathologist providing private speech and 
 
     language services to the pediatric population.</p> 
 
    </div> 
 
</div>