Question

我需要帮助。我正在尝试获取链接以在您单击链接时更改显示的答案。我想让它在每次点击时来回切换。我一直在玩多个项目，但似乎没有任何工作。我已经注释了一些注释，以帮助理清我想做的事情。谢谢！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
<script src="jquery.js" type="text/javascript" language="JavaScript"></script>
<script type="text/javascript">


function flipSwitch(){
document.getElementById('first').style.display = 'block';
document.getElementById('second').style.display = 'block';
    //get the first div into this variable
    //var firstDiv = document.getElementById('first');
    firstDiv.style

    //change it's style/display properties from none to block.  Is it visible now when you click the link?
    //firstDiv.
}

</script>
</HEAD>


<BODY>

<div id="home">
<A HREF="javascript:flipSwitch()">Let's see if we can get this to work?</A>
</div>

<div id="first" style="DISPLAY: none;">This is a test...</div>

<div id="second" style="DISPLAY: none;">of the emergency broadcast system</div>

</BODY>

Answer 1

将javascript移出HTML是一种很好的做法。以下是在javascript中切换CSS Display属性的示例。

小提琴： http://jsfiddle.net/LdPfS/

var link = document.querySelector("#home > a")

link.addEventListener("click", function(e) {
    e.preventDefault()

    var firstDiv = document.getElementById('first'),
        secondDiv = document.getElementById('second'),
        toggle = firstDiv.style.display === "none" ? "block" : "none"

        /* toggle = firstDiv.style.display === "none" ? "block" : "none"
         * Read as
         * if ( firstDiv.style.display === "none" ) {
         *     toggle = "block"
         * else {
         *     toggle = "none"
         * }
         */

    firstDiv.style.display = toggle
    secondDiv.style.display = toggle
})

Answer 2

我同意全部大写html很奇怪，但为了快速，我会复制/粘贴您的代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
<script src="jquery.js" type="text/javascript" language="JavaScript"></script>
<script type="text/javascript">

    function flipSwitch(){
        // first and foremost, you're using jQuery so let's use jquery
        if ($('#first').is(':hidden')) {
          $('#first').show();
          $('#second').hide();
        } else {
          $('#first').hide();
          $('#second').show();
        }
    }

    // next, let's get your javascript OUT of the html
    $(document).ready(function () {
        // when the document has loaded, attach our function as a
        // click handler to the link
        $('#my_switch').on('click', flipSwitch);
    });

</script>
</HEAD>
<BODY>

    <div id="home">
        <a id="my_switch">Let's see if we can get this to work?</a>
    </div>

    <div id="first" style="DISPLAY: none;">This is a test...</div>
    <div id="second" style="DISPLAY: none;">of the emergency broadcast system</div>

</BODY>

Answer 3

与MBottens类似，但有一些简单的JQuery：

$('#home > a').on('click', function(e) {
    e.preventDefault()
    $('#first').toggle();
    $('#second').toggle();
});

Answer 4

试试这个逻辑。获取全局变量并将其值设置为1。

  <script type="text/javascript">
  var countClick=1;

  function flipSwitch(){
   if(countClick%2==0){
  document.getElementById('first').style.display = 'block';
  document.getElementById('second').style.display = 'none';
  }
  else{
   document.getElementById('first').style.display = 'none';
   document.getElementById('second').style.display = 'block';

  }
 countClick++;
  }

 </script>

另外请使用以下html更改您的html：

<body>

<div id="home">
 <a href="javascript:void(0);" onclick="flipSwitch()">Let's see if we can get this to work?</a>
</div>

 <div id="first" style="display: none;">This is a test...</div>

 <div id="second" style="display: none;">of the emergency broadcast system</div>

</body>

Jquery需要帮助 - 单击链接时更改内容

4 个答案: