使用 CSS 的一个主页和导航
我正在尝试使用 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>
这是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);
}
});
});
大多数 示例 我有关于更新的场景导航链接的背景颜色使用基于加载具有 body id 的完整新页面的技巧。我只有一页（所以只有一个 body 标签），并且我使用 js 来更新主要内容。我很好奇是否有一种方法可以让一个主页带有导航并允许导航突出显示。我真正想到的唯一一件事，但我不太喜欢，就是使用这样的js：
$('.NavClick').css('background','transparent'); $('.NavClick').css('color','white');
如果可能的话，我想要一个 HTML/CSS 解决方案（即没有 SSI、php 等）。
I'm trying to create my first website using HTML/CSS. My goal here is to have one single main page, and when a person clicks the navigation links, it updates the main-content portion of the index.html file (but doesnt update the rest of the content like header and footer). I would also like it to keep the background color a different color than the rest. I'm hoping to reduce the duplicate html code while using as little js as possible (preferably all CSS, but I'm not sure thats possible). For example, if you where to click on the Contact link, you would end up with the following:
When clicking on the link, it updates the "main-section" below using 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>
Here is the 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);
}
});
});
Most of the examples I have scene about updating the background color of the navigation links use tricks based on loading complete new pages that have body id's. I only have one page (so only one body tag ever) and I use js to update the main-content. I'm curious if there is a way to have one main page with navigation and allow navigation highlighting. The only thing I've really come up with, but I dont really like, is using the js like this:
$('.NavClick').css('background','transparent');$('.NavClick').css('color','white');
I would like an HTML/CSS solution if possible (ie, no SSI, php, etc).
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
如果我理解正确，您只是在寻找一种解决方案来根据单击的菜单链接背景来更改菜单链接背景。由于您已经使用 jQuery，我建议使用以下解决方案：
jQuery:
CSS:
工作示例： http://jsfiddle .net/TqxHq/
If I understand it right, you are just looking for a solution to change the menu links backgrounds depending on which one was clicked. Since you're using jQuery already, I'd recommend the following solution:
jQuery:
CSS:
Working example: http://jsfiddle.net/TqxHq/
http:// net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/
非常好的解决方案，满足您的需求！
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/
Very nice solution for what you want!