Question

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

Header and Link Selection http://i55.tinypic.com/oarp6e.jpg

点击链接时，它会使用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>

这是js：

$(document).ready(function()
{
   $('#main-section').load('Home.html'); // Default
   $('.NavClick').click(function(e)
   {
      var url = $(this).attr('href');
      if(!url.match('^http'))
      {
         e.preventDefault();
         $('#main-section').load(url);
      }
   });
});

我有关于更新导航链接背景颜色的examples大多数场景使用基于加载具有body id的完整新页面的技巧。我只有一个页面（所以只有一个正文标签）我使用js来更新主要内容。我很好奇是否有办法让一个主页面有导航并允许导航突出显示。我唯一能想到的，但我真的不喜欢，就是使用这样的js：

$('.NavClick').css('background','transparent'); $('.NavClick').css('color','white');

如果可能的话，我想要一个HTML / CSS解决方案（即没有SSI，php等）。

Answer 1

如果我理解正确，您只是在寻找一个解决方案，根据点击的菜单链接背景来更改菜单链接背景。由于您已经使用了jQuery，我建议使用以下解决方案：

jQuery的：

$('a').click(function() {
    $('.selected').removeClass('selected');
    $(this).addClass('selected');
});

CSS：

a.selected {
    background-color: #ddf;
}

工作示例：http://jsfiddle.net/TqxHq/

Answer 2

http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/

非常好的解决方案，你想要的东西！

一个主页面和使用CSS导航

2 个答案: