0

我正在构建一个网络应用程序，我计划使用 Phone Gap Build 将其转换为智能手机应用程序。我以前从来没有这样做过，所以可能没有清楚地描述我的问题，但这里有。我开始在 Dreamweaver 中使用 jquery mobile 示例，它在一个 html 文件中有多个页面。我想做的是在每一页上都有一系列的英语短语，每个英语短语后面都会有正式的西班牙语翻译，然后是非正式的西班牙语翻译。在页面顶部，用户将看到三个按钮，分别是“正式”、“非正式”和“正式和非正式”。用户将始终看到英语短语后跟正式、非正式或正式和非正式西班牙语，具体取决于他们按下/点击的按钮。

可以在这里看到主页http://www.pslt.biz/mobileApp/LE4/index3.html然后单击“年龄、体重和身高”，您会看到单击正式/非正式按钮对第一句“你多大了”下面的西班牙语。如果有帮助，这里的正式按钮应该将 CSS 类“.formal”设置为 Display:Block，将“.informal”类设置为 Display:None

     <a href="#" onclick="document.getElementById('formal').style.display='block';document.getElementById('informal').style.display='none';">Display   Formal</a>

CSS 类在外部定义如下：

    .formal { display:block;
    }

    .informal {display:block;
    }

西班牙语短语在 div 中定义如下：

     <div class="formal"> <!-- Start Formal -->
             <div style="float:left">
                 <a href="#" onclick="playSound('Sounds/testaycaramba.mp3');">
                 <img src="images/audio-75.gif" alt="" width="25" height="25" /></a>
              </div>
              <div style="float:left">
                  Cuántos años tiene?
              </div>
      </div> <!-- End Formal -->
      <div class="informal"> <!-- Start informal -->
              <div style="clear:left">
                  <div  style="float:left">
                      <a href="#" onclick="playSound('Sounds/testaycaramba.mp3');">
                      <img src="images/audio-75.gif" alt="" width="25" height="25" /></a>
                  </div>
                  <div>
                       Cuántos años tienes?
                  </div>
              </div>
      </div> <!-- End informal -->

如果有人能指出我正确的方向，我会非常感激，我认为这很简单，但我一定错过了一些非常明显的东西。

4

5 回答 5

1

使用getElementsByClassName()而不是getElementById().

你有类名的选择器，而不是 id或替换class="informal"和class="formal"等id="informa1"。

于 2013-06-04T10:55:04.573 回答
1

您可以使用 jQuery：

<a href="#" 
    onclick="$('.formal').css('display', 'block'); $('.informal').css('display', 'none');">Display Formal</a>

问题是您的 div 具有“正式”和“非正式”类，而不是 id，并且您是按 ID 选择的。

另外的选择：

    <a href="#" onclick="$('.formal').show();$('.informal').hide()">Display Formal</a>
于 2013-06-04T11:13:37.240 回答
1

MiFeet 的解决方案效果很好。我使用了显示正式

出于某种原因，我无法将其作为答案，当我单击复选框时收到错误消息，我希望这对其他人有帮助。

托尼·巴布

于 2013-06-06T11:04:40.477 回答
0

如果你已经class="informal"替换它class="informal1"并尝试这个

<a href="#" onclick="change();" id="remove" class="informal">Display Formal</a>

function change(){

$('#remove').removeClass('informal');
$("#remove").addClass("informal1");

}
于 2013-06-04T13:13:49.450 回答
0

JS代码：

button.onclick=function(){

    element=document.getElementsByClassName("formal")[0];
    element.className="informal";

}
于 2013-06-04T11:03:48.980 回答