JavaScript 目标。-6ren

JavaScript 目标。

转载作者：行者123 更新时间：2023-11-28 04:57:28

31

4

这是有问题的网站:

http://www.onepixelroom.com/londonrefurb

当我点击关于部分后面的多个圆圈时，我希望它更改上面文本中的引号。

到目前为止，我得到它来显示

文本中的内容。但我真的希望它能为每个按钮显示一个特定的引用。

例如，当我点击“one”时，我希望它说:“Gloubiboulga”但是当我点击“两个”时，我希望它说:“Zorro”

JavaScript:

<body onLoad="initialize();">
<script type="text/javascript">window.onload=function(){
var ul = document.querySelector('#bodyleft ul');
ul.onclick = function(e){
    var evt = e || window.event;
    var target = evt.target || evt.srcElement;
    var p = document.querySelector('#bodyright h3');
    p.innerHTML = '" ' + target.innerHTML + ' "';
    return false;
};
}</script>

html:

<div id="bodyright">
  <h3>" one "</h3>
</div>



<div id="bodyleft">
  <ul class="benefitSwitcher">
    <li><a href="#_self" style="cursor: pointer;    ">one</a></li>
    <li><a href="#_self" style="cursor: pointer;    ">two</a></li>
    <li><a href="#_self" style="cursor: pointer;    ">three</a></li>
    <li class="last"><a href="#_self" style="cursor: pointer;   ">four</a></li>
  </ul>
</div>

</div>

CSS:

.benefitSwitcher {
    top:120px;
    position:relative;
    display: block;
    width: 695px;
    list-style: none;
    text-align: center;
    margin: 0;
    padding: 0;
    margin: auto;
    z-index:2;

}

.benefitSwitcher li {
    display: table;
    float: left;
    margin-right: 70px;
    z-index: 2;

}

.benefitSwitcher li.last { margin-right: 0; z-index:2;}

.circleLink { display: table; margin: auto; margin-top: 40px; z-index:2;}

.benefitSwitcher li a, .circleLink a {
    display: table-cell;
    width: 90px;
    height: 120px;
    padding: 0 15px;
    background-color: #fff;
    color: #414141;
    text-decoration:none;
    border-radius: 60px;
    font-family: Georgia, sans-serif;
    font-style: italic;
    line-height: 1.2;
    vertical-align: middle;
    -webkit-transition-property: background-color, color;
    -moz-transition-property: background-color, color;
    -o-transition-property: background-color, color;
    transition-property: background-color, color;
    -webkit-transition-duration: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    transition-duration: 0.2s;
    z-index:2;
}

.benefitSwitcher li a:hover, .benefitSwitcher li.active a, .circleLink a {
    background: #49E2D6;
    color: #fff;
    z-index:2;
}

.circleLink a:hover { background-color: #000; 
}


#bodyleft{
        z-index:2;
}
#bodyright{
        z-index:2;
}

最佳答案

检查这个解决方案:

http://jsfiddle.net/gtB9j/

JS代码:

$(document).ready(function(){

    $('li').click(function(){
        var newVal = $(this).data('name');
        $('#bodyright').find('h3').html(newVal);           
    })
});

HTML代码:

<div id="bodyleft">
    <ul class="benefitSwitcher">
        <li data-name="godzilla">one</li>
        <li data-name="pokemon">three</li>
        <li data-name="zombie">two</li>
        <li data-name="zorro">four</li>
    </ul>
</div>

关于JavaScript 目标。，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20589621/

31

4

0

文章推荐： javascript - 为什么 Canvas 在圆(弧)之间画线？

文章推荐： c++ - 使固定大小的 block 池分配器适应某些 STL 容器

文章推荐： javascript - TypeError : $(. ..).SetHeight 不是函数

文章推荐： javascript - 具有特殊字符的 InnerHTML 正在 trim 数据

unit-testing - CMake:目标 "test"不构建测试，目标 "all"构建测试
我创建了一个基于命令行可移植脚本的工业化不可知构建系统，可用于快速构建多个依赖项目，而不必依赖特定的 IDE 或构建工厂。它是不可知的，因为它不是基于单个构建引擎。我使用 cmake 创建了第一个版本
java - antlr4 语法适用于 Java 目标，但适用于 Python 目标
我最初使用 Java 目标开发了一个语法(用于 TestRig 支持)，然后将其移植到 Python(从 git hub 语法存储库扩展了 Python3 语法，因此需要将操作移植到 Python
ios - 仅在 xcode 中启动 iPhone 目标，而不启动 OSwatch 目标，当两者都存在于项目中时
我有一个以 iPhone 和 watchOS 为目标的 Xcode 项目。 iPhone 目标使用加速度计，模拟器不支持。我可以只启动 iPhone 应用程序而不启动 watch 目标吗？我从: Ca
windows - 删除 .eml 文件中的行并将新的 "files"(目标 A)复制到多个文件(目标 B)中
您好，我想创建一个批处理文件，用于在 .eml 文件(目标 A)中查找某些关键字，然后删除它们所在的行。之后，我需要批处理文件将"new"文件放入(目标 B)中的单独 .eml 文件中。文件也可以是
android - 无法将使用 JVM 目标 1.8 构建的字节码内联到使用 JVM 目标 1.6 构建的字节码
当尝试通过 IntelliJ 运行示例 CorDapp (GitHub CorDapp) 时，我收到以下错误: Cannot inline bytecode built with JVM target
gradle - Kotlin:无法将使用 JVM 目标 1.8 构建的字节码内联到使用 JVM 目标 1.6 的字节码中
我在尝试向我的 kotlin spring 项目添加一些依赖项时遇到问题。我使用 spring boot 初始化程序来运行一个基本项目。我的问题:如果我取消对 jackson 或 Koin 依赖项的
JavaScript 目标。
这是有问题的网站: http://www.onepixelroom.com/londonrefurb 当我点击关于部分后面的多个圆圈时，我希望它更改上面文本中的引号。到目前为止，我得到它来显示文本
jQuery:目标 $(this) 和一个元素
单击后，我将删除两个元素 $(this) 和 $("#foo")。目前我的代码如下所示: $(this).remove(); $("#foo").remove(); 如何在不重复自己的情况下优化它？
具有多个依赖项的 Makefile 目标
我有一个小脚本，可将 Markdown 文件编译为 html，并将其与一些样式表和 javascript 一起插入到模板的主体中。我有一个 GNU makefile 来完成这个: output.htm
C 目标 if 语句有问题
已关闭。此问题需要 debugging details 。目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and the
每个客户端的 IOS 目标
一些背景知识: 在android中我们开发了同样的应用，基本上我们先开发了Android应用，现在我们创建了它的IOS版本，所以这个应用有多个客户端。在 android 中，我们实际上是使用 Andr
javascript - knockout 目标
我想知道是否可以使用 knockout 来更改html中的目标() 我的所有其他信息都在 JavaScript 中，所以这对我来说是一个大问题。这是我的 JavaScript: var library
jquery - 目标::在jquery之前
这个问题在这里已经有了答案: Selecting and manipulating CSS pseudo-elements such as ::before and ::after using j
c++ - 如何遍历有向图中的所有边并获取源+目标
我在我的有向图中添加了一堆节点和顶点，使用设置 typedef boost::adjacency_list graph; 创建 Node有一个节点名称字符串，Edge它的分数有一个整数。我试图遍历所有
Android 目标 API
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。这个问题似乎与 help center 中定义的范围内的编程无关。 . 关闭 8 年前。 Improve
ios - 如何存储自定义对象数组(目标)
如何存储我在 NSUserDefaults 中创建的 Goal 类型的对象数组？ ( swift ) 代码如下: func saveGoalList ( newGoalList : [Goal] ){
TypeScript 目标 ES3
Array.prototype.indexOf 和 Date.now 已在 ES5 中引入。如果我编译存储在文件 test.ts 中的以下代码，为什么 Typescript 不能转译？ Date.no
C# 属性和属性位置/目标
我正在阅读有关属性的内容，并了解到可以使用您的代码将它们应用于不同的目标实体 -(请参阅 Attribute Targets)。因此，查看我项目中的 AssemblyInfo.cs 文件，我可以看到
makefile - 如何执行所有匹配通配符的 makefile 目标
给定一个 Makefile: all: build/a build/b build/c # need to change this to all: build/* build/a:
build - 仅针对一个框架的 MSBuild 目标
我有一个带有多框架目标的项目- netstandard2.0;net471 . 我想为 netframework 构建解决方案和 netstandard分别。目前我使用这个 MSBuild 命令:

首页

博学

6Ren·AI

商城

JavaScript 目标。