Question

所以我有一个导航栏菜单。网站默认位于“关于”页面。但我想要完成的是当我点击另一个菜单项时，比如体验，我希望关于段落改为我对体验的段落。我觉得这很简单，但我似乎无法做到这一点。

感谢您的帮助！这就是我的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

你可以像这样使用jQuery，不需要＆＃34; display：none;＆＃34;：

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

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

});

#eduNavItem将是导航栏上教育项目的ID。

Answer 2

这很简单。这是一个工作片段：

＆＃13;

14:56:23.041 INFO - Executing: [new session: Capabilities [{acceptSslCerts=true, browserName=firefox, javascriptEnabled=true, version=47, platform=ANY}]])
14:56:23.049 INFO - Creating a new session for Capabilities [{acceptSslCerts=true, browserName=firefox, javascriptEnabled=true, version=47, platform=ANY}]
1481756183115   geckodriver INFO    Listening on 127.0.0.1:19913
14:56:23.141 INFO - Attempting bi-dialect session, assuming Postel's Law holds true on the remote end
1481756183145   mozprofile::profile INFO    Using profile path /var/folders/0b/7xp2lxbd7yl0tcpms06fr3d40000gn/T/rust_mozprofile.zhTJMwOyP59u
1481756183151   geckodriver::marionette INFO    Starting browser /Applications/Firefox.app/Contents/MacOS/firefox-bin

＆＃13;

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

＆＃13;

每当单击一个菜单按钮时，它会隐藏所有其余按钮并显示单击的按钮。我希望这有帮助！

马特

Answer 3

我会尝试制作它，以便您可以快速添加更多链接和区域。为每个部分添加一个类，以便您可以一次隐藏它们。

然后使用href查找要显示的正确部分。（我已将你的＆＃34; bio＆＃34; 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元素来定位包含文本的元素。希望有用，请问您可能有的任何问题，我很乐意提供帮助！

＆＃13;

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

＆＃13;

#text > div {
	display:none;
}

.active {
	display: block !important;
}

＆＃13;

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

＆＃13;

JQuery为导航栏添加/删除类

4 个答案: