`
stargate
  • 浏览: 5962 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

一个简单常用的javascript菜单效果

阅读更多

这是一个简单的常用的折叠菜单

 <script>    
      var classCount = 4; // 菜单大类的个数  
        function Show(theId) {//参数为菜单的编号,从0开始   
        theTr = eval("tr_" + theId);  //生成相应元素的在页面中的ID  
              //通过此ID来设置相应元素的CSS属性  
              //如果是折叠的,则展开之  
        if (theTr.style.display == "none") {  
            theTr.style.display = "block";  
        }  
              //否则折叠之  
        else {  
            theTr.style.display = "none";  
        }  
              //遍历关闭之前展开的菜单(对当前菜单不做处理)   
        for (i = 0; i < classCount; i++) {  
            if (i == theId)  
                continue;  
            theTr = eval("tr_" + i);  
            theTr.style.display = "none";  
        }  
      }  
    </script> 

<table>
            <tr>
                <td id="td_0" align="middle" width="89%" bgColor=#1f65c2>
                    <a href="javascript:show(0)">基础数据管理</a>
                </td>
            </tr>
            <tr id="tr_0" style="display:none;curson:hand">
                <td align="middle" bgColor="#4c84ce" height="50">
                    <div>基础数据管理</div>
                </td>
            </tr>

            <tr>
                <td id="td_1" align="middle" width="89%" bgColor=#1f65c2>
                    <a href="javascript:show(1)">基础数据管理</a>
                </td>
            </tr>
            <tr id="tr_1" style="display:none;curson:hand">
                <td align="middle" bgColor="#4c84ce" height="50">
                    <div>基础数据管理</div>
                </td>
            </tr>
        </table>

javascript中eval

eval的使用场合是什么呢?有时候我们预先不知道要执行什么语句,只有当条件和参数给时才知道执行什么语句,这时候eval就派上用场了。举个例子:

我们要做一个function(),功能是输入网页中两个个对象的名称,然后程序就将这两个对象的值联接起来输出。

function output(a,b)
{
var tmpa,tmpb;
tmpa=document.all.a.value;
tmpb=document.all.b.value;
document.write(tmpa+tmpb);
}

output('input1','input2');

这样你执行的时候就会提示错误“document.all.a不是对象”以及“document.all.b不是对象”。原来 javascript把a和b当成对象名称了,怎样能让javascript把a里面的值作为对象名称呢?这时候就要用eval了,把代码改成这样:

function output(a,b)
{
var tmpa,tmpb;
tmpa=eval("document.all."+a+".value");
tmpb=eval("document.all."+b+".value");
document.write(tmpa+tmpb);
}

output('input1','input2');

这样javascript就会先取出a,b的值,然后和前面的document.all.以及后面的.value组合运行,于是就可以
顺利取出input1和input2的值,我们的目的达到了

分享到:
评论

相关推荐

    简单的Javascript折叠菜单

    "简单的Javascript折叠菜单"就是这样一个实现方式,它允许用户通过点击来展开或折叠菜单项,从而节省页面空间,提高用户体验。 折叠菜单的基本原理是利用JavaScript事件处理和DOM(Document Object Model)操作。...

    javascript 菜单

    "Basic"可能是一个基础的JavaScript菜单,展示了最简单的下拉或弹出菜单的基本结构。这包括如何使用JavaScript操作DOM元素(如添加和删除class,显示和隐藏元素)以及响应用户事件。 4. **Drop Shadow** "Drop ...

    JavaScript实现简单的树形菜单效果

    本文介绍了如何使用JavaScript实现一个简单的树形菜单效果,通过这个实例,我们可以学习到如何操作DOM、如何通过JavaScript控制样式的变化,以及如何实现一个基本的交互式菜单。 首先,我们需要了解HTML结构。从给...

    javascript菜单。。。。。。。。

    一个简单的菜单可能包含`&lt;ul&gt;`(无序列表)和`&lt;li&gt;`(列表项)元素,其中`&lt;li&gt;`可以包含子菜单的`&lt;ul&gt;`。 3. **CSS 样式** CSS用于美化菜单的外观,如颜色、字体、边框、悬停效果等。我们可以使用类选择器或ID选择...

    javascript经典特效---简单又酷的菜单条.rar

    在"简单又酷的菜单条.htm"文件中,通常会包含一个`&lt;ul&gt;`元素作为菜单条的基础容器,其中包含一系列的`&lt;li&gt;`元素,代表每个菜单项。例如: ```html &lt;li&gt;&lt;a href="#"&gt;菜单1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;菜单2&lt;/a&gt;&lt;/...

    javascript实现简单的下拉菜单

    本文将详细介绍如何使用JavaScript实现一个简单的下拉菜单功能。这种下拉菜单在网页设计中非常常见,它不仅可以节省页面空间,还能提供更好的用户体验。通过本文的学习,你将能够理解并掌握基本的下拉菜单实现方法,...

    简单的下拉菜单左侧菜单效果css+js效果,可同时使用

    本示例中,我们探讨的是一个简单的下拉菜单左侧菜单效果,它结合了CSS和JavaScript技术,提供了易于实现和使用的解决方案。 首先,让我们关注CSS部分。在提供的压缩包中,有三个CSS文件:styles.css、nav-h.css和...

    JavaScript与web树形菜单全

    以下是一个简单的无限级树形菜单的JavaScript实现概念: ```javascript function createTree(data, parentElement) { for (let item of data) { let li = document.createElement('li'); let a = document....

    【JavaScript源代码】javascript实现下拉菜单效果.docx

    下面将详细解析提供的代码,讲解如何使用 JavaScript 和 HTML/CSS 实现一个简单的下拉菜单。 首先,HTML 结构定义了菜单的基本布局。`&lt;div class="menu"&gt;` 包含了五个带有按钮的下拉项。每个下拉项都是一个 `&lt;div&gt;`...

    JavaScript 树形菜单

    一个简单的树形菜单由`&lt;ul&gt;`和`&lt;li&gt;`元素构成,其中`&lt;li&gt;`元素代表菜单节点,而子节点则嵌套在父节点的`&lt;ul&gt;`中。例如: ```html 节点1 子节点1.1 子节点1.2 节点2 节点3 ``` 接下来,我们需要用...

    JavaScript做的简单的级联菜单实例

    在JavaScript编程中,级联菜单(Cascading Menu)是一种常见的网页交互元素,它通常用于网站导航,允许用户通过点击主菜单项来展开下一级的子菜单,以此类推,形成一个多层次的下拉效果。这个"JavaScript做的简单的...

    简单的JavaScript特效

    2. **下拉菜单**:在招聘网站上,通常会有多个职位分类,JavaScript可以实现鼠标悬停时显示下拉菜单的效果。 3. **轮播图**:展示公司的介绍或者职位信息,JavaScript可以实现自动切换图片或手动滑动的轮播效果。 ...

    右键菜单(javaScript)

    在标签“右键菜单”中,我们可以推测这个压缩包可能包含一个简单的示例或者教程,用于展示如何用JavaScript实现这样的功能。文件名“右键菜单.html”表明这可能是一个HTML文件,其中包含了JavaScript代码来实现右键...

    js延时菜单

    下面是一个简单的延时菜单实现步骤: 1. **HTML结构**:首先,创建一个触发元素(例如一个按钮)和一个隐藏的菜单元素。 ```html 触发菜单 ;"&gt; &lt;!-- 菜单内容 --&gt; ``` 2. **CSS样式**:为菜单添加适当的样式,使...

    jquery 菜单效果

    jQuery 是一个流行的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax交互,使得创建动态菜单变得更加简单。本篇文章将深入探讨jQuery菜单效果的实现方式,通过分析描述中的“三个不一样的效果”,来揭示...

    切换菜单栏js效果

    这个简单的示例展示了如何使用JavaScript(JQuery)实现菜单栏的切换效果。实际应用中,可能还需要考虑更多因素,比如动画过渡效果、多设备适配、以及优化性能等。通过扩展和调整这些基础代码,可以创建出更加复杂和...

    jQuery简单实现仿京东商城的左侧菜单效果代码

    这些元素结合起来,使得一个简单的左侧菜单效果得以实现。不过,根据描述,此代码效果尚未完善,仍存在一些问题,例如页面闪动等,需要进一步的调试和优化。此外,代码的复制与粘贴需要保持HTML和CSS样式的正确性,...

    JavaScript下拉菜单

    一个简单的下拉菜单通常由`&lt;select&gt;`标签和一系列`&lt;option&gt;`标签组成。例如: ```html &lt;option value="option1"&gt;Option 1 &lt;option value="option2"&gt;Option 2 &lt;option value="option3"&gt;Option 3 ``` 然而,...

    1500个常用JavaScript特效

    这个"1500个常用JavaScript特效"的资源集合,为开发者提供了丰富的代码示例和灵感,涵盖了多个方面,旨在帮助提升网页的交互性和用户体验。 1. **菜单效果**:JavaScript可以动态创建和控制网页菜单,实现下拉、...

    JavaScript实现的漂亮的基于MooTools 框架的边栏平滑菜单效果demo

    MooTools是一个轻量级且功能丰富的JavaScript库,它的设计灵感来源于Ruby on Rails,旨在提供一种更加优雅和模块化的编程方式。 在"JavaScript实现的漂亮的基于MooTools 框架的边栏平滑菜单效果demo"中,我们可以...

Global site tag (gtag.js) - Google Analytics