`
joerong666
  • 浏览: 418311 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

显示隐藏页面内容的通用方法

阅读更多

<script type="text/javascript" language="javascript">  
/**
* 显示或者隐藏页面内容
* 显示时具有img ID元素的样式类名为:showImg
* 隐藏时具有img ID元素的样式类名为:hiddenImg
*
* @idCode: 要显示或者隐藏的页面元素id
* @hiddenImg: 隐藏时相应的图片路径(如向下的箭头)
* @showImg: 显示内容时相应的图片路径(如向上的箭头)
*/
function displayHiddenArea(idCode,hiddenImg,showImg)
{  
    var imgId = "img" + idCode;
    var contentId = "content" + idCode;
   
    if (document.getElementById(contentId).style.display == "none")
    {
        document.getElementById(contentId).style.display = "block";
       
        //判断是使用图片路径,还是使用样式类名
        if (showImg == null)
            document.getElementById(imgId).className = "showImg";
        else
            document.getElementById(imgId).src = showImg;
    }
    else
    {
        document.getElementById(contentId).style.display = "none";
       
        if (hiddenImg == null)
            document.getElementById(imgId).className = "hiddenImg";
        else
            document.getElementById(imgId).src = hiddenImg;
       
    }
}

  </script>
   
    <style type="text/css">
    .showImg
    {
        background-image:url(../Images/share/ico-up.gif);
        padding:0 5px;
    }
   
    .hiddenImg
    {
        background-image:url(../Images/share/ico-Descend.gif);
        padding:0 5px;
    }
    </style>

分享到:
评论

相关推荐

    Div显示与隐藏网页制作

    在"Div显示与隐藏网页制作"这个主题中,我们将探讨如何利用`Div`实现网页元素的动态显示和隐藏,这对于创建交互式和响应式的网页至关重要。 在网页设计中,有时我们需要根据用户的行为或者特定条件来控制某些内容的...

    jQuery通用方法库

    jQuery提供了许多实用的方法,如`$(selector).html()`用于获取或设置HTML内容,`$(selector).click(function(){})`用于绑定点击事件,以及`$(selector).hide()`和`.show()`用于元素的显示和隐藏。此外,`$(document)...

    jQuery带显示隐藏左右按钮的幻灯片效果

    本文将深入探讨如何使用jQuery库来实现一个带显示隐藏左右按钮的幻灯片效果,帮助你提升网站的视觉吸引力。 jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax交互。在创建幻灯片...

    页面隐藏菜单栏

    在IT行业中,页面隐藏菜单栏是一个常见的需求,特别是在设计网页或移动应用时,为了提供更好的用户体验,有时需要根据用户操作或特定场景动态显示或隐藏菜单栏。本篇将围绕这个主题,结合“ben_app”这个压缩包中的...

    网页自动操作通用工具 v3.50.rar

    2、支持后台操作或者前台显示操作效果,可完全隐藏运行。 3、一个任务可针对同一页面添加多个操作。 4、多任务可相互触发连续或循环执行。 5、兼容自动刷新任务、自动点击任务和自动提交任务。 6、支持代理...

    JS +CSS+DIV 拖攥 模块显示隐藏 换肤

    "模块显示隐藏"则涉及到页面元素的动态显示与隐藏,可以优化用户体验,提高界面的可操作性和灵活性。"换肤"功能则是指允许用户根据个人喜好更改网站的主题颜色或样式,提升个性化体验。 **JavaScript (JS)**:JS 是...

    DIV的显示和隐藏.pdf

    在网页设计中,`div` 是一个非常重要的 HTML 元素,它用于组织和布局页面内容。本主题主要探讨如何通过 JavaScript 来控制 `div` 的显示和隐藏,这对于创建交互式网页至关重要。 首先,我们可以看到一个简单的示例...

    javascript DIV隐藏、显示 弹出式窗口样式

    JavaScript是Web开发中不可或缺的一部分,尤其在处理DOM(文档对象模型)操作时,如隐藏和显示元素,以及创建弹出式窗口。在这个场景中,我们关注的是如何利用JavaScript控制HTML中的`&lt;div&gt;`元素,以及如何实现弹出...

    jquery实现通用网页打印

    在“jquery实现通用网页打印”这个主题中,我们将深入探讨如何使用jQuery来实现在B/S(Browser/Server)架构的网页上进行打印功能,这在各种Web应用程序中都是一个常见的需求。 首先,理解基本的打印原理。在浏览器...

    vue+echarts数据显示通用模板

    【Vue+ECharts数据显示通用模板】是一个用于快速搭建数据可视化项目的框架,它集成了柱状图、饼图、地图和表格等多种数据展示方式,旨在帮助开发者实现数据展示功能时能够快速上手,节省开发时间。这个模板充分利用...

    完整版隐藏、显示滚动条例程 .e.rar

    在IT领域,隐藏和显示滚动条是用户界面设计中的一项基本操作,特别是在开发网页、桌面应用或移动应用时。滚动条通常用于处理超出视口的内容,允许用户通过滚动查看更多信息。这个“完整版隐藏、显示滚动条例程 .e....

    JS+CSS实现感应鼠标渐变显示DIV层的方法.docx

    在网页开发中,有时我们需要创建动态的交互效果来提升用户体验,比如当鼠标移过...这种感应鼠标渐变显示和隐藏DIV层的方法是Web开发中的一个实用技巧,对于开发者来说,掌握这样的技术能够使网页变得更加生动和吸引人。

    基于JavaScript实现通用tab选项卡(通用性强)

    `.contentli`类用于定义内容区域的显示高度和初始隐藏状态。此外,通过`.selected`类来突出选中的Tab项,一般通过改变背景颜色来实现视觉上的区分。 3. JavaScript交互逻辑: 选项卡的关键功能是通过JavaScript实现...

    swift-一劳永逸iOS网页视图控制器通用类封装

    开发者可以通过自定义方法来控制这些元素的显示和隐藏。 9. **扩展性**:为了适应不同的应用场景,通用类通常设计为可扩展的。开发者可以方便地添加自定义功能,如添加额外的JavaScript接口,或者集成第三方库来...

    简单通用登录页面模板demo

    本资源提供了一个"简单通用登录页面模板demo",这是一款专为用户登录界面设计的模板,具备表单验证功能,旨在帮助开发者快速构建一个直观且有效的登录界面。 首先,我们来了解一下CSS(Cascading Style Sheets),...

    一个用JS做的通用选项卡

    2. **AJAX**(Asynchronous JavaScript and XML)是一种创建动态网页的技术,允许在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。虽然现在XML在AJAX中已不常用,但这个术语仍用于描述异步数据...

    适合各行业响应式通用模板

    响应式通用模板是一种适用于多个行业的网页设计解决方案,其核心特点是能够自动适应不同设备的屏幕尺寸,包括电脑、平板和手机,提供一致且优化的用户体验。这样的模板设计旨在提高网站的可访问性和用户友好性,无论...

    jquery 通用tab 切换效果

    在网页设计中,Tab切换效果是一种常见的用户交互设计,它允许用户通过点击不同的标签来切换显示不同的内容区域。"jQuery 通用Tab切换效果"就是利用jQuery这个强大的JavaScript库实现的一种高效且灵活的Tab组件。...

    基于Unity3D简单UI框架

    2.提供界面显示隐藏动画接口 3.单独界面层级,Collider,背景管理 4.根据存储的导航信息完成界面导航 5.界面通用对话框管理(多类型Message Box) 6.便于进行需求和功能扩展(比如,在跳出页面之前添加逻辑处理等) ...

    网页复制微信打开微信通用demo,超简单易用

    3. **创建临时输入框**:为了能够复制非可编辑元素的文本,通常会在页面上动态创建一个隐藏的input元素,将选中的内容放入input中。 4. **复制文本**:使用`document.execCommand('copy')`方法来复制input中的文本到...

Global site tag (gtag.js) - Google Analytics