js实例点击标题(js设置标题)

本文目录一览:

用js实现点击一个标题A时出现隐藏层AA,在点击标题B时出现隐藏层BB,同时关闭隐藏层AA该怎么写

用jquery实现比较省事,同一页面可以反复使用,要配合css设置样式。

先引用jquery.js

function setClickTab(a, b) {

$(a + ” span:first”).addClass(“current”); //为第一个SPAN添加当前效果样式

$(b + ” div:not(:first)”).hide(); //隐藏其它的UL

$(a + ” span”).click(function () {

$(a + ” span”).removeClass(“current”); //去掉所有SPAN的样式

$(this).addClass(“current”);

$(b + ” div”).hide();

$(“.” + $(this).attr(“id”)).show();

});

}

div id=”tab”span id=”a”a/spanspan id=”b”b/span/div

div class=”tabCnt”

div class=”a”!–样式名a与上面的span的id一一对应–

这是aa

/div

div class=”b”

这是bb

/div

/div

script language=”javascript”

setClickTab(“#tab”,”.tabCnt”); //jquery中如果是id则以#开头,样式名(class)则以.开头,当执行到这里时,会自动隐藏所有的层,只显示a层。点击span里的标题可以实现切换显示。

/script

请问怎么用JS编写一个点击标题的时候标题前面有一个图片点击那一个标题,那个图片就在那个标题前面

简单方法如下:

在标题的容器前面加一个div,div中放一图片

点击标题时触发一个事件,控制div的隐藏和显示

over….

怎样用js获取当前页面的标题,并写到一个文本框中?

思路:使用document.title获取页面标题,使用value属性为文本框赋值,关键代码:

document.getElementById(input_id).value=document.title;

实例演示如下:

1、HTML结构

html

head

    titleTEST/title

/head

body

    input type=”text” id=”test”/

    input type=’button’ value=’点击按钮获取页面标题’ onclick=”fun()”/

/body

2、javascript代码

function fun(){

var title = document.title;

document.getElementById(“test”).value = title;

}

3、效果演示

原创文章,作者:小蓝,如若转载,请注明出处:https://www.506064.com/n/259731.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
小蓝小蓝
上一篇 2024-12-15 16:30
下一篇 2024-12-15 16:30

相关推荐

  • JS Proxy(array)用法介绍

    JS Proxy(array)可以说是ES6中非常重要的一个特性,它可以代理一个数组,监听数据变化并进行拦截、处理。在实际开发中,使用Proxy(array)可以方便地实现数据的监…

    编程 2025-04-29
  • Python生成随机数的应用和实例

    本文将向您介绍如何使用Python生成50个60到100之间的随机数,并将列举使用随机数的几个实际应用场景。 一、生成随机数的代码示例 import random # 生成50个6…

    编程 2025-04-29
  • 解析js base64并转成unit

    本文将从多个方面详细介绍js中如何解析base64编码并转成unit格式。 一、base64编码解析 在JavaScript中解析base64编码可以使用atob()函数,它会将b…

    编程 2025-04-29
  • Node.js使用Body-Parser处理HTTP POST请求时,特殊字符无法返回的解决方法

    本文将解决Node.js使用Body-Parser处理HTTP POST请求时,特殊字符无法返回的问题。同时,给出一些相关示例代码,以帮助读者更好的理解并处理这个问题。 一、问题解…

    编程 2025-04-29
  • t3.js:一个全能的JavaScript动态文本替换工具

    t3.js是一个非常流行的JavaScript动态文本替换工具,它是一个轻量级库,能够很容易地实现文本内容的递增、递减、替换、切换以及其他各种操作。在本文中,我们将从多个方面探讨t…

    编程 2025-04-28
  • 如何在dolphinscheduler中运行chunjun任务实例

    本文将从多个方面对dolphinscheduler运行chunjun任务实例进行详细的阐述,包括准备工作、chunjun任务配置、运行结果等方面。 一、准备工作 在运行chunju…

    编程 2025-04-28
  • JS图片沿着SVG路径移动实现方法

    本文将为大家详细介绍如何使用JS实现图片沿着SVG路径移动的效果,包括路径制作、路径效果、以及实现代码等内容。 一、路径制作 路径的制作,我们需要使用到SVG,SVG是可缩放矢量图…

    编程 2025-04-27
  • Python存为JSON的方法及实例

    本文将从以下多个方面对Python存为JSON做详细的阐述。 一、JSON简介 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅…

    编程 2025-04-27
  • 如何使用JS调用Python脚本

    本文将详细介绍通过JS调用Python脚本的方法,包括使用Node.js、Python shell、child_process等三种方法,以及在Web应用中的应用。 一、使用Nod…

    编程 2025-04-27
  • 分析if prefixoverrides="and |or"的用法与实例

    if语句是编程语言中最为基础和常见的控制流语句,而prefixoverrides是if语句的一个重要属性。其中,prefixoverrides的常见取值为and和or。那么,这两者…

    编程 2025-04-27

发表回复

登录后才能评论