点击切换内容导航代码（纯js怎样实现网站导航栏的切换）

本文目录

• 纯js怎样实现网站导航栏的切换
• HTML使用DIV+CSS如何实现左边导航，右边显示内容，点击那个导航显示那个内容
• 关于JavaScript如何切换搜索引擎的导航网页搜索框的实例代码分享

纯js怎样实现网站导航栏的切换

《html》
《head》
***隐藏网址***
《title》多选项切换导航菜单《/title》
《/head》
《style type="text/css"》
#dNavBar{
background-color:#ffffff;
}
#dNavBar li{
list-style-type:none;
float:left;
width:84px;
height:28px;
line-height:28px;
font-size:12px;
color:#FFFFFF;
border:1px solid #ffffff;
background:#86C2FF;
text-align:center;
display:block;
cursor:pointer;
}
#subMenu{
background:#99cc66;
width:500px;
border-left:1px solid #ffffff;
border-right:1px solid #ffffff;
height:29px;
line-height:29px;
color:#FFFFFF;
font-size:12px;
padding-left:10px;
}
body {
margin: 0px;
}
a:link,a:visited {
color: #FFFFFF;
text-decoration: none;
}
a:hover{
color: #FFFFFF;
text-decoration: none;
}
《/style》
《script language="javascript"》
function ShowMenu()
{
var barCTT=document.getElementByIdx_x("dNavBar")
var liArr=barCTT.getElementsByTagName_r("li")
var links=new Array()
links="《a href=’#’》当前位置：首页"
links="《a href=’#’》项目一《/a》 | 《a href=’#’》项目二《/a》 | 《a href=’#’》项目三《/a》 | 《a href=’#’》项目四《/a》"
links="《a href=’#’》项目一《/a》 | 《a href=’#’》项目二《/a》 | 《a href=’#’》项目三《/a》"
links="《a href=’#’》项目一《/a》 | 《a href=’#’》项目二《/a》 | 《a href=’#’》项目三《/a》 | 《a href=’#’》项目四《/a》 | 《a href=’#’》项目五《/a》"
links="《a href=’#’》项目一《/a》 | 《a href=’#’》项目二《/a》"
links="《a href=’#’》项目一《/a》 | 《a href=’#’》项目二《/a》 | 《a href=’#’》项目三《/a》"
links="《a href=’#’》项目一《/a》 | 《a href=’#’》项目二《/a》"
links="《a href=’#’》项目一《/a》 | 《a href=’#’》项目二《/a》"
links="《a href=’#’》项目一《/a》 | 《a href=’#’》项目二《/a》"
links="《a href=’#’》项目一《/a》 | 《a href=’#’》项目二《/a》"
links="《a href=’#’》项目一《/a》| 《a href=’#’》项目二《/a》"
links="《a href=’#’》项目一《/a》 | 《a href=’#’》项目二《/a》"
links="《a href=’#’》项目一《/a》 | 《a href=’#’》项目二《/a》"
for (i=0;i《liArr.length;i++)
{
liArr.onclick=function()
{
selectThis(this,liArr,links)
}
}
}
function selectThis(indexObj,allLi,infoArr)
{
var index=0;
for (i=0;i《allLi.length;i++)
{
allLi.style.border="1px solid #ffffff";
allLi.style.backgroundColor="#86C2FF";
allLi.style.height="28px";
if (indexObj==allLi)
{
index=i;
}
}
indexObj.style.borderBottom="0px solid #666688";
indexObj.style.backgroundColor="#99cc66";
indexObj.style.height="31px";
document.getElementByIdx_x("subMenu").innerHTML=infoArr;
}
《/script》
《body onLoad="ShowMenu()"》
《div id="dNavBar" style="float:none; width:560px;"》《li》首页《/li》《li》娱乐快报《/li》《li》音乐天地《/li》《li》极品FLASH《/li》
《/div》
《div id="subMenu"》站务公告《/div》
《/body》
《/html》

HTML使用DIV+CSS如何实现左边导航，右边显示内容，点击那个导航显示那个内容

1、新建html文档。

2、书写hmtl代码。

《ul》

《li》《A class="hover" href="#"》前端交流《/A》《/li》

《li》《A href="#"》交互设计《/A》《/li》

《li》《A href="#"》视觉设计《/A》《/li》

《li》《A href="#"》用户研究《/A》《/li》

《li》《A href="#"》设计茶吧《/A》《/li》

《li》《A href="#"》前端交流《/A》《/li》

《li》《A href="#"》团队生活《/A》《/li》

《div id="lanPos"》《/div》

《/ul》

3、书写css代码。

《style》

html, body, div, span, object, iframe, h1, h3, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; font-weight: normal; }

body { line-height: 1; }

:focus { outline: 1; }

article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; }

nav ul, ul, li { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ’’; content: none; }

a { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; background: transparent; text-decoration: none; }

a:hover { text-decoration: underline; }

ins { background-color: #ff9; color: #000; text-decoration: none; }

mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }

del { text-decoration: line-through; }

abbr { border-bottom: 1px dotted #000; cursor: help; }

table { border-collapse: collapse; border-spacing: 0; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #cccccc; margin: 1em 0; padding: 0; }

input, select { vertical-align: middle; }

.fl { float: left; display: inline-block; }

.fr { float: right; display: inline-block; }

.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }

.clearfix { display: inline-table; }

* html .clearfix { height: 1%; }

.clearfix { display: block; }

html { font-size: 62.5%; /* 10÷16=62.5% */ }

body { font-size: 12px; font-size: 1.2rem; background: #F8F8F8; font-family: "宋体"; }

ul { width: 180px; margin: 0 auto; background: #fff; position: relative; z-index: 0; padding: 60px 20px 70px; }

ul li { height: 40px; line-height: 40px; text-align: center; border-bottom: 1px solid #F8F8F8; }

ul li a { color: #666; display: block; }

ul li a:hover { color: #FF5F3E; text-decoration: none; }

ul li a.hover { color: #FF5F3E; }

#lanPos { width: 225px; height: 40px; line-height: 40px; background: #F8F8F8; border-left: 5px solid #FF5F3E; position: absolute; left: -5px; top: 0; z-index: -1; transition: top .2s; }

《/style》

4、书写并引用js代码。

《script src="js/jquery.min.js"》《/script》

《script》

$(function(){

$(’#lanPos’).css(’top’,$(’.hover’).offset().top);

$(’ul li’).hover(function(){

$(’#lanPos’).css(’top’,$(this).offset().top);

},function(){

$(’#lanPos’).css(’top’,$(’.hover’).offset().top);

})

$(’ul li’).click(function(){

for(var i=0;i《$(’ul li’).size();i++){

if(this==$(’ul li’).get(i)){

$(’ul li’).eq(i).children(’a’).addClass(’hover’);

}else{

$(’ul li’).eq(i).children(’a’).removeClass(’hover’);

}

}

})

})

《/script》

5、代码整体结构。

6、查看效果

关于JavaScript如何切换搜索引擎的导航网页搜索框的实例代码分享

这篇文章主要介绍了javascript切换搜索引擎的导航网页搜索框的实例代码，非常不错，具有参考借鉴价值 ,需要的朋友可以参考下
废话不多说了，直接给大家贴代码了，具体代码如下所述：