導航欄的JQuery添加/刪除類

Question

所以我有一個導航欄菜單。網站默認位於About頁面。但是我試圖完成的是，當我點擊另一個菜單項時，例如體驗，我希望關於段落更改爲我的體驗段落。我覺得這很簡單，但我似乎無法做到。

感謝您的幫助！這是我的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;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

這很簡單。這是一個工作片段：

$("#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>

如果點擊了一個菜單按鈕，它隱藏了所有的休息，並顯示被點擊的一個。我希望這有幫助！

馬特

Answer 2

您可以使用jQuery這樣做，有沒有必要的「顯示：無;」：

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

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

}); 

#eduNavItem將是教育的id項目在導航欄。

Answer 3

我會盡力讓它可以快速添加更多鏈接和區域。 爲每個部分添加一個類，以便一次隱藏所有部分。

然後使用href找到要顯示的正確部分。 （我已經改變您的 「生物」 的div即將匹配在href。

的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

我會改變你的代碼類似於下面，與優勢這是你可以繼續開發你的網站，代碼永遠不需要改變，它通過使用data-target元素來定位包含文本的元素，希望這有助於提出你可能有的任何問題，我很樂意幫助！

$(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>