我正在寻找一种更改单个页面内容的方法,而不是使用 jQuery 或类似的东西将用户重定向到新页面。我对脚本很陌生,因此将不胜感激。
我已经在 jsFiddle 中创建了一个快速模型,演示了网站的基本布局以及当用户请求不同页面时我想更改的内容:
http://jsfiddle.net/Syrne/8pMnR/
代码:
HTML:
<div class="container">
<div class="navbar">
<div id="navWrap" class="container">
<div class="nav-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Home</a>
</li>
<li><a href="#">Link 1</a>
</li>
<li><a href="#">Link 2</a>
</li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Drop <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<!-- DoW -->
<li class="dropdown-submenu"> <a tabindex="-1" href="#">Menu</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Option 1</a>
</li>
<li><a tabindex="-1" href="#">Option 2</a>
</li>
<li><a tabindex="-1" href="#">Option 3</a>
</li>
</ul>
</li>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<hr></hr>
<div id="main_page">
<p><b>MAIN CONTENT</b></p>
<p>This content should change dynamically when a user follows a page link.</p>
<hr></hr>
</div>
<div class="footer">
<p>© 2013</p>
</div>
</div>
CSS:
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.dropdown-submenu {
position:relative;
}
.dropdown-submenu>.dropdown-menu {
top:0;
left:100%;
margin-top:-6px;
margin-left:-1px;
-webkit-border-radius:0 6px 6px 6px;
-moz-border-radius:0 6px 6px 6px;
border-radius:0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display:block;
}
.dropdown-submenu>a:after {
display:block;
content:" ";
float:right;
width:0;
height:0;
border-color:transparent;
border-style:solid;
border-width:5px 0 5px 5px;
border-left-color:#cccccc;
margin-top:5px;
margin-right:-10px;
}
.dropdown-submenu:hover>a:after {
border-left-color:#ffffff;
}
.dropdown-submenu.pull-left {
float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left:-100%;
margin-left:10px;
-webkit-border-radius:6px 0 6px 6px;
-moz-border-radius:6px 0 6px 6px;
border-radius:6px 0 6px 6px;
}
#main_page {
text-align: center;
}
.footer {
text-align: center;
}
.navbar .nav,
.navbar .nav > li {
float:none;
display:inline-block;
vertical-align: top;
}
#navWrap {
text-align: center;
}
}
如您所见,站点的中间区域是应该发生动作的地方。其余部分(导航栏和页脚)应保持固定。
作为参考,我提取了这个利用 jQuery、“Modernizr”和 HTML5 的历史 API 的指南,以便为每次内容更改保留唯一的 URL;这正是我想要做的,但我似乎无法思考如何让它适用于我当前的设计。非常感谢任何帮助,即使是在路上帮助我的轻微提示。我对网页设计/开发非常陌生,有很多东西要学。