Question

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

可在此处显示主页http://www.pslt.biz/mobileApp/LE4/index3.html，然后点击“年龄，体重和身高”，您会看到单击正式/非正式按钮对第一个短语“多久”下的西班牙语没有影响你是”。如果它有帮助，那么应该将CSS类“.formal”设置为Display：Block和“.informal”类来显示：无

     <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 -->

如果有人能指出我正确的方向，我会非常感激，我认为做起来很简单，但我必须错过一些非常明显的事情。

Answer 1

使用getElementsByClassName()代替getElementById()。

您有按类名选择的选择，而不是ID 或将class="informal"和class="formal"替换为id="informa1"等。

Answer 2

你可以使用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>

Answer 3

MiFeet的解决方案非常完美。我用了显示正式

出于某种原因，我无法证明这是一个答案，当我点击复选框时收到错误，我希望这有助于其他人。

Tony Babb

Answer 4

JS代码：

button.onclick=function(){

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

}

Answer 5

如果您有class="informal"，请将其替换为class="informal1"并尝试此操作

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

function change(){

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

}

如何在用户单击按钮时使用js更改css类中的display属性

5 个答案: