JS点击显示导航菜单效果,求能切换的。

JavaScript015

JS点击显示导航菜单效果,求能切换的。,第1张

你是不是还有个div的id为hidden2了 但是你这里只有一个div,我已经在加了一个div id为hidden2 看看是不是你要的那种效果。

<a href="javascript:DIVShow('hidden1')">个人产品</a>

<a href="javascript:DIVShow('hidden2')">商用产品</a>

<div class="show" style="display:none" id="hidden1">

<ul class="nav_2">

<div class="jtou" style="position:relativeleft:116pxtop:-11px"></div>

<span style="float:leftcolor:#0085C3font-size:15pxfont-weight:boldheight:55pxline-height:55px">限时特惠 </span>

<li><a href="#">笔记本</a></li>

<li><a href="#">超级本</a></li>

<li><a href="#">台式机</a></li>

<li><a href="#">一体机</a></li>

<li><a href="#">Alienware游戏电脑及配件</a></li>

<li><a href="#">显示器</a></li>

</ul>

</div>

<div class="show" style="display:none" id="hidden2">asfaff</div>

js写导航栏hover效果每个js定时器产生时会被系统分配一个id,这个id是正整数,而且一个页面里面的定时器id不重复,我们能用一个变量接收这个id,但是如果重复执行一条接收创建语句,那么你只能接收到最新创建的定时器的id,之前创建的定时器的id会被覆盖,但是定时器数量在增加,这就会导致界面一些功能错乱,解决方法就是在重复按开始按钮时,如果已经有了一个定时器那么就不执行语句,我列出了错误代码和三种解决方法,可以解决定时器重复创建问题。

不懂这儿的选中是鼠标点击还是覆盖或者是点击之后的效果,因此就都说一下: 1.被点击时的效果可以用div:active{ css } 2.鼠标覆盖在上面的时候可以用div:hover{ css} 3.点击之后的效果,这个相对前2种有些麻烦,必须用到JS或者jquery,步骤如下: a.先给div添加一个选中的样式比如on{css}; b.然后在js中$('div').click(function{ $('div').toggleClass(' ','on')}) 这是jquery自带的一个方法,点击div切换2个class,