JS导航栏

最新推荐文章于 2024-07-19 22:17:56 发布
最新推荐文章于 2024-07-19 22:17:56 发布
阅读量694 收藏
点赞数
分类专栏： js 文章标签： list function file border class javascript
<html>
<head>
</head>
<body>
<script language="JavaScript" type="text/JavaScript">
var x=7;//这里的X等于t(txt,n)的个数
var pic_habitus=0;//这里设置上面图片的初始值
function showtb(tbnum){
var whichEl = eval("tbtype" + tbnum);
var Bws_Num = eval(tbnum);
var x=7;//这里的X等于t(txt,n)的个数
if (whichEl.style.display == "none"){
eval("tbtype" + tbnum + ".style.display=\"\";");
eval("file_"+ tbnum +".src=\"images/icon-folder1-open.gif\";")
eval("list_"+ tbnum +".src=\"images/icon-folder-open.gif\";")
   for(i=1;i<x+1;i++){
    if(i!=Bws_Num){
     eval("tbtype" + i + ".style.display=\"none\";")
     eval("file_"+ i +".src=\"images/icon-folder1-close.gif\";")
     eval("list_"+ i +".src=\"images/icon-folder-close.gif\";")
    }
   }
}else{
eval("tbtype" + tbnum + ".style.display=\"none\";");
eval("file_"+ tbnum +".src=\"images/icon-folder1-close.gif\";")
eval("list_"+ tbnum +".src=\"images/icon-folder-close.gif\";")
}
}
function expandall(bb){
pic_habitus
if(pic_habitus==0){
   for(i=1;i<x+1;i++){
   eval("tbtype" + i + ".style.display=\"\";");
   eval("file_"+ i +".src=\"images/icon-folder1-open.gif\";")
   eval("list_"+ i +".src=\"images/icon-folder-open.gif\";")
   }
   pic_habitus=1;
   bb.src="images/icon-expandall.gif";
   bb.alt="全部关闭";
}else{
   for(i=1;i<x+1;i++){
   eval("tbtype" + i + ".style.display=\"none\";");
   eval("file_"+ i +".src=\"images/icon-folder1-close.gif\";")
   eval("list_"+ i +".src=\"images/icon-folder-close.gif\";")
   }
   pic_habitus=0;
   bb.src="images/icon-closeall.gif";
   bb.alt="全部展开";
}
}
function t(txt,n){
document.write("<table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" class=\"borderon\"><tr><td height=\"20\" style=\"padding-left:10px;CURSOR: hand\" οnclick=showtb("+ n +")><img src=\"images/icon-folder1-close.gif\"width=\"15\" height=\"13\" name=\"file_"+n+"\"><img src=\"images/icon-folder-close.gif\" width=\"16\" height=\"15\" name=\"list_"+n+"\">"+txt+"</td></tr><tbody style=\"display=none\" id=\"tbtype"+ n +"\">")
}
function list(url,target,txt){
document.write("<tr><td height=\"20\" style=\"padding-left:13px\"><img src=\"images/line.gif\" width=\"13\" height=\"18\" align=\"absmiddle\"><a href=\""+ url +"\" target="+target+">"+ txt +"</td></tr>")
}
</script>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="borderon">
<tr>
<td height="40" align="center">后台管理系统 V1.0版
<img src="images/icon-closeall.gif" alt="全部展开" width="16" height="15" vspace="2" align="absmiddle" class="button" οnclick="expandall(this)">
</td>
</tr>
</table>
<script>
t("网站管理",1)
list("http://www.kl21.com","_blank","首页基本配置")
list("http://www.kl21.com","_blank","首页基本配置")
list("http://www.kl21.com","_blank","首页基本配置")
list("http://www.kl21.com","_blank","首页基本配置")
list("http://www.kl21.com","_blank","首页基本配置")
list("http://www.kl21.com","_blank","首页基本配置")
list("http://www.kl21.com","_blank","首页基本配置")
t("商品管理",2)
list("http://www.kl21.com","_blank","首页基本配置")
list("http://www.kl21.com","_blank","首页基本配置")
list("http://www.kl21.com","_blank","首页基本配置")
list("http://www.kl21.com","_blank","首页基本配置")
list("http://www.kl21.com","_blank","首页基本配置")
list("http://www.kl21.com","_blank","首页基本配置")
list("http://www.kl21.com","_blank","首页基本配置")
t("会员管理",3)
list("http://www.kl21.com","_blank","首页基本配置")
list("http://www.kl21.com","_blank","首页基本配置")
list("http://www.kl21.com","_blank","首页基本配置")
list("http://www.kl21.com","_blank","首页基本配置")
list("http://www.kl21.com","_blank","首页基本配置")
list("http://www.kl21.com","_blank","首页基本配置")
list("http://www.kl21.com","_blank","首页基本配置")
t("会员管理",4)
list("http://www.kl21.com","_blank","首页基本配置")
list("http://www.kl21.com","_blank","首页基本配置")
list("http://www.kl21.com","_blank","首页基本配置")
list("http://www.kl21.com","_blank","首页基本配置")
list("http://www.kl21.com","_blank","首页基本配置")
list("http://www.kl21.com","_blank","首页基本配置")
list("http://www.kl21.com","_blank","首页基本配置")
t("会员管理",5)
list("http://www.kl21.com","_blank","首页基本配置")
list("http://www.kl21.com","_blank","首页基本配置")
list("http://www.kl21.com","_blank","首页基本配置")
list("http://www.kl21.com","_blank","首页基本配置")
list("http://www.kl21.com","_blank","首页基本配置")
list("http://www.kl21.com","_blank","首页基本配置")
list("http://www.kl21.com","_blank","首页基本配置")
t("会员管理",6)
list("http://www.kl21.com","_blank","首页基本配置")
list("http://www.kl21.com","_blank","首页基本配置")
list("http://www.kl21.com","_blank","首页基本配置")
list("http://www.kl21.com","_blank","首页基本配置")
list("http://www.kl21.com","_blank","首页基本配置")
list("http://www.kl21.com","_blank","首页基本配置")
list("http://www.kl21.com","_blank","首页基本配置")
t("会员管理",7)
list("http://www.kl21.com","_blank","首页基本配置")
list("http://www.kl21.com","_blank","首页基本配置")
list("http://www.kl21.com","_blank","首页基本配置")
list("http://www.kl21.com","_blank","首页基本配置")
list("http://www.kl21.com","_blank","首页基本配置")
list("http://www.kl21.com","_blank","首页基本配置")
list("http://www.kl21.com","_blank","首页基本配置")
</script>
</body>
</html>
csscnu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js导航栏A标签锚点跳转
10-16
"js导航栏A标签锚点跳转"是JavaScript在网页交互中的常见应用，主要用于实现页面内部链接的平滑滚动效果。这个话题涉及到的知识点包括HTML锚点、JavaScript事件处理和DOM操作。 首先，HTML锚点（#标识符）允许我们...
JS读取txt文件，并进行相关的处理
qq_42190727的博客
06-01 8355
最近在搞一些关于度量方面的动作，需要将度量结果写入到对象数组中。因为数据量比较大，手动去搬运实在是太麻烦了，所以决定借助于JS实现这一任务。 在进行这个工作前，我也查了一些相关的内容。确实，在应用场景中是不会用JS去处理txt的，所以网络上相关的内容很少。所以我写下这篇博客，记录一下JS读取txt的方法，以及我在处理中遇到的一些问题。 在读取文件上，Chrome与IE略有不同，我的代码是针对于Chrome浏览器的，IE的话需要使用ActiveXObject，需要大家注意一下。 1、TXT文件的读取
JS实现导航栏
u010178118的专栏
06-05 1万+
使用js实现一个简单的导航栏。利用js实现某种效果的步骤：1.实现CSS布局；2:js的实现原理；3.写CSS代码。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style> ul { padding:0px; marg
用JS写的一个简单的导航栏
热门推荐
聂亚兵的博客
09-05 1万+
选项卡 * { margin: 0; padding: 0; } span { display: inline-block; margin-left: 30px; width: 150px; height: 40px; background: #FFFFFF; border-bottom: 2px so
js 可以左右滑动的导航栏 以及 展示对应页面
qq_39835505的博客
04-11 2985
嘿嘿，刚做好的，展示给大家，我也是参考别人做的 参考网址 https://blog.csdn.net/fengtingYan/article/details/87446652 主要做的这个，因为代码少 https://blog.csdn.net/Gaia_qi/article/details/79528832 https://blog.csdn.net/qq_33563147/artic...
js导航栏
qq_40962557的博客
10-10 499
js原生代码实现导航栏动画效果。 代码如下： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;jsNav&lt;/title&gt; &lt;/head&gt; &lt;body&am
JavaScript实现滑动导航栏效果
10-19
主要为大家详细介绍了JavaScript实现滑动导航栏效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JavaScript实现鼠标点击导航栏变色特效
10-20
本文给大家分享一段基于js代码实现的鼠标点击导航栏变色效果，代码简单易懂，非常不错，具有参考借鉴价值，需要的的朋友参考下
JavaScript实现精美个性导航栏筋斗云效果
10-19
【JavaScript实现精美个性导航栏筋斗云效果】是一种在网页设计中常见的动态效果，它能够增强用户界面的吸引力和互动性。在这个效果中，当鼠标悬停在导航栏的各个菜单项上时，一个背景图像（通常是颜色渐变或特定图形...
javascript 导航条
10-18
JavaScript 导航条是网页设计中常见的一种交互元素，它能提供用户友好的页面导航功能。在本项目中，我们创建了一个自定义的、简单的JavaScript导航条，这将涵盖一些基本的JavaScript编程概念以及HTML和CSS的基础应用...
以为的js导航栏
weixin_44519188的博客
02-21 181
以为的js导航栏 开发工具与关键技术：DW、Transform 作者：小赵 撰写时间：2019/2/21 安逸的假期也该结束，你的内心是否躁动起来了；是否在抱怨假期太短，还是在虚度假期？在网络丰富的时代，是否有很多新鲜的事物冲击着你的视野，在查找的时候有些缭乱；不要紧张，我们动手了解一下风琴导航，通过简单的css就可以实现，js的动态功能；向来看下简单的HTML布局吧，如下截图： 在截图中我们看...
JS做的左侧导航栏
青峰专栏
06-21 8177
<br /><html xmlns="http://www.w3.org/1999/xhtml" ><br /><head runat="server"><br />    <title></title><br />    <link href="../styles/global.css" type="text/css" rel="stylesheet"/><br />    <link href="../styles/admin.css" type="text/css" rel="stylesheet"/
导航栏(nav.js)
qq_44971069的博客
11-10 1708
//处理首页的导航部分 AMD define(["jquery"],function($){//通过define声明，第一个参数传入要用的模块,直接用$就可以拿到这个数据 function download() { //封装第一个函数来下载数据(轮播图的数据) $.ajax({ type: "get", url: "../data/nav.json", success: function(da
一步步教大家编写酷炫的导航栏js+css实现
qq_41672590的博客
01-27 1万+
一步一步的学习制作导航栏，文章末尾再做个综合页面，分享给大家一个炫酷的导航栏供大家参考，具体内容如下 1.当前页面高亮显示的导航栏 首先是HTML代码,很简单,ul+li实现菜单 导航栏一 Android C++ IOS Java Ruby
html js左侧导航栏,js实现简单分页导航栏效果
weixin_33208553的博客
06-02 1420
本文实例为大家分享了js实现分页导航栏效果的具体代码，供大家参考，具体内容如下最终的效果:1. 分页需要的几个重要参数:总记录条数:totalCount (查数据库)每页记录数:pageSize (自己设置)总页数:totalPageNum (根据上面的参数计算)当前页: currentPageNum(前台传入)当前页要显示的内容 :List (查数据库: pageSize和curr...
C++基础语法:STL之容器(5)--序列容器中的list(二)
最新发布
jllws1的博客
07-19 729
"打牢基础,万事不愁" .C++的基础语法的学习。
定制QCustomPlot 带有ListView的QCustomPlot 全网唯一份
DreamLife
07-17 1144
魔改QCustomPlot，支持QLIstView 和 QScrollArea滚动。支持数百条甚至上千条数据显示。只是拖拽改变数据顺序，支持自定义图例，曲线支持上下拖拽改变Y轴大小。
Java8两个集合(List)取交集、并集、差集、去重并集
billzhen的博客
07-19 245
**
js导航栏点击选中状态
09-07
在实现JS导航栏点击选中状态时，可以使用以下的步骤： 1. 先通过DOM选取所有导航菜单的元素，并将其存储在一个变量中。可以使用`document.querySelectorAll('selector')`选择所有需要的导航菜单元素，并将其存储在一个变量中。 2. 给每个导航菜单元素添加一个点击事件监听器。通过循环遍历每个导航菜单元素，使用`addEventListener`方法给每个导航菜单元素添加一个点击事件监听器，并在事件处理函数中执行下一步的操作。 3. 在点击事件处理函数中，通过修改元素的类名，实现选中状态的切换。当点击某个导航菜单元素时，首先移除所有导航菜单元素的选中类名，然后给当前点击的导航菜单元素添加选中类名，从而实现选中状态的切换。 4. 在CSS样式表中设置选中状态的样式。为了让选中的导航菜单显示不同的样式，可以在CSS样式表中为选中状态的导航菜单设置特定的样式，例如高亮背景色或者改变字体颜色等。 通过以上步骤的实现，当点击某个导航菜单时，该导航菜单将会显示选中状态的样式，并且其他导航菜单将会取消选中状态的样式。这样就实现了JS导航栏的点击选中状态。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值