Jquery 一个使用CSS的主页和导航_Jquery_Css_Navigation

Jquery 一个使用CSS的主页和导航

jquery css navigation

Jquery 一个使用CSS的主页和导航,jquery,css,navigation,Jquery,Css,Navigation,我正在尝试使用HTML/CSS创建我的第一个网站。我的目标是拥有一个单一的主页，当用户单击导航链接时，它会更新index.html文件的主要内容部分（但不会更新其余内容，如页眉和页脚）。我也希望它保持背景颜色不同于其他颜色。我希望减少重复的html代码，同时尽可能少地使用js（最好是所有CSS，但我不确定这是否可行）。例如，如果单击“联系人”链接的位置，您将得到以下结果：当点击链接时，它会使用js更新下面的“主要部分” <body> <div id="main-co

我正在尝试使用HTML/CSS创建我的第一个网站。我的目标是拥有一个单一的主页，当用户单击导航链接时，它会更新index.html文件的主要内容部分（但不会更新其余内容，如页眉和页脚）。我也希望它保持背景颜色不同于其他颜色。我希望减少重复的html代码，同时尽可能少地使用js（最好是所有CSS，但我不确定这是否可行）。例如，如果单击“联系人”链接的位置，您将得到以下结果：

当点击链接时，它会使用js更新下面的“主要部分”

 <body>
  <div id="main-container">
   <div id="header-section">
    <div class="header-content">Header Text</div>
    <div id="header-navigation">
     <ul>
      <li><a class="NavClick" href="Home.html">Home</a></li>
      <li><a class="NavClick" href="Photos.html">Photos</a></li>
      <li><a class="NavClick" href="Programming.html">Programming</a></li>
      <li><a class="NavClick" href="Contact.html">Contact</a></li>
      <li><a class="NavClick" href="About.html">About</a></li>
     </ul>
    </div>
   </div>
   <div id="main-section"></div>
   <div id="footer-section">
    <div class="footer-content">
    </div>
   </div>
  </div>
 </body>

大多数关于更新导航链接背景颜色的场景都使用了一些技巧，这些技巧是基于加载包含

正文

id的完整新页面。我只有一个页面（所以只有一个body标签），我使用js更新主要内容。我很好奇，是否有一种方法可以让一个主页带有导航并允许导航突出显示。我唯一真正想到的，但我不太喜欢的是，像这样使用js：

$（'.NavClick'）.css（'background'，'transparent'）
$（'.NavClick'）.css（'color'，'white'）
如果可能的话，我想要一个HTML/CSS解决方案（即，没有SSI、php等）。

非常好的解决方案，满足您的需求
 
非常好的解决方案，满足您的需求
 如果我理解正确，您只是在寻找一种解决方案，根据单击的菜单链接背景来更改菜单链接背景。既然您已经在使用jQuery，我推荐以下解决方案：
jQuery：
$('a').click(function() {
    $('.selected').removeClass('selected');
    $(this).addClass('selected');
});

CSS:
工作示例：
如果我理解正确，您只是在寻找一种解决方案，根据单击的菜单链接背景来更改菜单链接背景。既然您已经在使用jQuery，我推荐以下解决方案：
jQuery：
$('a').click(function() {
    $('.selected').removeClass('selected');
    $(this).addClass('selected');
});

CSS:
工作示例：这不会破坏浏览器的后退按钮功能吗？@bazz-Yup，看起来是这样的。只要返回到最后一页，然后进入我的网站，无论导航上的链接被点击（或频率）。有没有更好的方法可以做到这一点？是的，更好的方法是，定期回发，而不是使用AJAX动态加载内容：-）对于使用AJAX保留回发按钮功能，请查看@Dave-感谢链接。是的，这是我第一次尝试，我不明白为什么人们会想复制每个页面中的所有导航和页脚内容。似乎应该有更好的方法来处理这个问题，但也许这就是为什么会有SSI/php/etc？这不会破坏浏览器的后退按钮功能吗？@bazz-Yup，看起来确实如此。只要返回到最后一页，然后进入我的网站，无论导航上的链接被点击（或频率）。有没有更好的方法可以做到这一点？是的，更好的方法是，定期回发，而不是使用AJAX动态加载内容：-）对于使用AJAX保留回发按钮功能，请查看@Dave-感谢链接。是的，这是我第一次尝试，我不明白为什么人们会想复制每个页面中的所有导航和页脚内容。似乎应该有更好的方法来处理这个问题，但也许这就是为什么会有SSI/php/etc？是的，看起来很接近。它似乎不会使当前页面导航链接保持不同的颜色。您知道如何更改它以在单击导航链接时获得不同的外观吗？另外，我仍然希望有一个非js的方式来做到这一点。谢谢你的链接！是的，看起来很接近。它似乎不会使当前页面导航链接保持不同的颜色。您知道如何更改它以在单击导航链接时获得不同的外观吗？另外，我仍然希望有一个非js的方式来做到这一点。谢谢你的链接！这绝对是一个比我想象的更好的方法，谢谢！有一些只针对CSS的标签解决方案（例如），但我不确定它们是否可以用于/调整这种情况……有趣的解决方案。看起来它使用了iFrame，我听说速度较慢，但这可能会奏效。似乎也支持浏览器后退按钮。这绝对是比我想象的更好的方式，谢谢！有一些只针对CSS的标签解决方案（例如），但我不确定它们是否可以用于/调整这种情况……有趣的解决方案。看起来它使用了iFrame，我听说速度较慢，但这可能会奏效。似乎也支持浏览器后退按钮。
a.selected {
    background-color: #ddf;
}