我正在處理我的第一個網頁,並遇到了爲我的粘滯導航欄找到正確代碼的問題。導航欄已附加了一個jQuery代碼,所以我想知道這是否會影響代碼,或者如果我沒有使用正確的代碼。這裏的導航欄的HTML ...如何將粘性導航欄添加到我的網頁
<div id="tab_container">
<nav id="tabs">
<ul id="nav">
<li class="active"><a href="#">About</a></li>
<li class="inactive"><a href="#">Services</a></li>
<li class="inactive"><a href="#">Our Staff</a></li>
<li class="inactive"><a href="#">book</a></li>
<li class="inactive"><a href="#">Gift Cards</a></li>
<li class="inactive"><a href="#">Reviews</a></li>
</ul>
</nav>
</div>
繼承人我CSS的吧...
#tab_container
{
background-color: #1E1E1E;
display: -webkit-box;
-webkit-box-flex: 1;
display: block;
position: relative;
max-width: 970px;
width: 100%;
text-align: center;
}
#tabs
{
float: left;
margin-top: 0px;
width: 100%;
max-width: 970px;
background-color: #1E1E1E;
padding-top: 20px;
text-align: center;
}
#nav
{
width: 100%;
max-width: 970px;
text-align: center;
background-color: #1E1E1E;
}
ul
{
float: left;
max-width: 970px;
display: -webkit-box;
-webkit-box-flex: 1;
width: 100%;
padding-left: 0px;
margin-bottom: 0px;
margin-top: 0px;
margin-right: 0px;
text-align: center;
background-color: #1E1E1E;
}
ul li
{
display: inline-block;
text-align: center;
width: 158px;
height: 70px;
background-color: #1a1a1a;
font-size: 18px;
text-transform: uppercase;
text-align: center;
margin:0 auto;
padding: 0;
}
ul li a
{
color: #54544b;
display: block;
height: 100%;
width: 100%;
text-decoration: none;
text-align: center;
margin: 0px auto;
line-height: 70px;
}
a:hover
{
color: #CF7BA1;
}
.active a
{
text-decoration: underline;
color: #CF7BA1;
background-color: #222;
}
而對於jQuery的我已經列入....
$(document).ready(function(){
$('ul#nav li').click(function(){
var number = $(this).index();
$('.sec').hide().eq(number).show();
$(this).toggleClass('active inactive');
$('ul#nav li').not(this).removeClass('active').addClass('inactive');
});
$('.sec').not(':first').hide();
});
這將是最好的jQuery的使用? – JavaFox
我可能沒有具體。當頁面滾過固定位置時,我希望導航欄粘貼到頁面的頂部。在其他作品中,我需要一個可滾動的導航欄,保留在頁面的頂部。 – JavaFox
只需使用position:fixed。看到這個http://jsfiddle.net/chauhangs/42Rqf/ – NullPointerException