导航条切换页面后指示当前所在页可以怎样实现？

elivenet 2008-11-18 12:31:20

像http://tianshihong-1987.blog.163.com/blog/这样，点击导航上的链接到达相应页面后导航上会体现出当前所在页面。这个见得很多，也见到很多网站虽然点击时有这样的鼠标经过效果但到了相应页面后还是指示在首页（感到迷惑，不知道到了哪）。

我觉得导航这样的效果是十分必要的，因此来问一下，这样的效果要不要传递参数？或发送cookie，光用CSS或JS能实现吗？怎样实现？能不能给些常用的实例？

...全文

637 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

heyl420 2008-11-27

打赏
举报

o(∩_∩)o...哈哈正在找这东西

elivenet 2008-11-19

打赏
举报

自顶一下，…………

elivenet 2008-11-18

打赏
举报

貌似CSS简单不少，代码少多了，上面列出的JS代码还要调用一大片JS文件。上面的够不够经典？有更经典好用的吗？

layers2323 2008-11-18

打赏
举报

js+css可以啊，ajax可以，图片也可以就是有点不灵活。

yanniu008 2008-11-18

打赏
举报

CSS是必要的因为要体现美观吗
JS其实可以写的很简单的只要点击时触发一个函数，函数的目的只是用来改变图片的SRC，就这么简单。

elivenet 2008-11-18

打赏
举报

dreamweaver里可以可视化的实现该功能吗？
我在网上搜到一个用CSS的和一个用JS的，为了这么一个小功能代码还不简单，各位觉得哪个好？有没有简单明了的？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>

    <html:base/>

    <meta http-equiv="content-type" content="text/html;charset=gb2312"/>

    <title>首页</title>  

	<script type="text/javascript" src="mootools.js"></script>

	<style type="text/css">

	<!--

	* {margin:0;padding:0}

	a.chick:link,a.chick:visited  {

	display:block;

	overflow:hidden;

	width:79px;

	height:25px;

	color:#fff;

	text-decoration:none;

	background:black;

	}

	a.chick:hover,a.chick:active {

	background:#ccc;

	}

	a.chicked:link,a.chicked:visited  {

	display:block;

	overflow:hidden;

	width:79px;

	height:25px;

	color:#000;

	background:#ccc;

	text-decoration:none;

	}

	a.chicked:hover,a.chicked:active {

	background:#ccc;

	}

	.mainnav{

			float:left;

			width:800px;

			border-right:#e3e3e3 1px;

			border-left:#e3e3e3 1px;

			overflow:hidden;

			cursor:pointer;

			}

			.mainnav li {

			float:left;

			overflow:hidden;

			width:79px;

			height:25px;

			line-height:30px;

			color:#353535;

			text-align:center;

			}

	.nav {clear:both}

	.nav li {list-style:none;display:inline;margin:10px;height:25px;line-height:25px;}

	-->

	</style>

 </HEAD>



 <BODY>

  <!---- ==================================== 页面中唯一不一样的地方 start ======================================= ------->

  <span id="indexpage"></span><!-- 判断top导航 -->

  <!---- ==================================== 页面中唯一不一样的地方 end ======================================= ------->



  <!-- 这是头部包含内容-->

  <ul class="mainnav">

      <li><a id="topindex" href="index.html" class="chick">首页</a></li>

      <li><a id="topdate" href="news.html"  class="chick">新闻</a></li>

      <li><a href="#" id="blogSrc"  class="chick">产品</a></li>

      <li class="nonavclear"><a href="#" id="albumSrc"  class="chick">其他</a></li>

   </ul>

   <ul id="indexnav" class="nav" style="display:none">

		<li>首页</li><li>首页</li><li>首页</li><li>首页</li><li>首页</li>

   </ul>

    <ul id="datenav" class="nav" style="display:none">

		<li>新闻</li><li>新闻</li><li>新闻</li><li>新闻</li><li>新闻</li>

   </ul>

      <ul id="blognav" class="nav" style="display:none">

		<li>产品</li><li>产品</li><li>产品</li><li>产品</li><li>产品</li>

   </ul>

      <ul id="photonav" class="nav" style="display:none">

		<li>其他</li><li>其他</li><li>其他</li><li>其他</li><li>其他</li>

   </ul>

  <script text="type/javascript">

	var arrayFlag = new Array("datepage","blogpage","photopage","indexpage"); //这是页面中调用的id标示

	var arrayNav = new Array("datenav","blognav","photonav","indexnav");  //这是下拉菜单

	var arraySrc = new Array("topdate","blogSrc","albumSrc","topindex"); //这是导航id

	arrayFlag.each(function(item,index){

		if($(item)){

			$(arraySrc[index]).setAttribute('className','chicked');

		}

	});

	arrayFlag.each(function(item,index){

		if($(item)){

			$(arrayNav[index]).style.display="block";

		}

	});

</script>

  <!-- 这是头部包含内容-->

 </BODY>

</HTML>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">



.indentmenu{

font: bold 13px Arial;

width: 100%; /*leave this value as is in most cases*/

}



.indentmenu ul{

margin: 0;

padding: 0;

float: left;

width: 80%; /*width of menu*/

border: 1px solid #564c66; /*dark purple border*/

border-width: 1px 0;

background: black;

}



.indentmenu ul li{

display: inline;

}



.indentmenu ul li a{

float: left;

color: white; /*text color*/

padding: 5px 11px;

text-decoration: none;

border-right: 1px solid #564c66; /*dark purple divider between menu items*/

}



.indentmenu ul li a:visited{

color: white;

}



#home .indentmenu li.home a,#css .indentmenu li.css a,#forums .indentmenu li.forums a,#tools .indentmenu li.tools a,#javascript .indentmenu li.javascript a,#gallery .indentmenu li.gallery a {

color: white !important; /*text color of selected and active item*/

padding-top: 6px; /*shift text down 1px for selected and active item*/

padding-bottom: 4px; /*shift text down 1px for selected and active item*/

background: #ccc;

}

</style>



</head>



<body id="home">

<!-- 这是头部包含内容-->

<div class="indentmenu">

<ul>

<li class="home"><a href="home.html">Home</a></li>

<li class="css"><a href="css.html">CSS</a></li>

<li class="forums"><a href="forums.html">Forums</a></li>

<li class="tools"><a href="tools.html">Webmaster Tools</a></li>

<li class="javascript"><a href="javascript.html">JavaScript</a></li>

<li class="gallery"><a href="gallery.html">Gallery</a></li>

</ul>

<br style="clear: left" />

</div>

  <!-- 这是头部包含内容-->

</body>

</html>