Javascript if/else onclick？

单击时将显示以下div。如何使其在div“content”中显示不同的消息取决于单击。我已经有了javascript来显示div的Test1和Test2。我只是想添加一个功能，也可以在div“content”中添加一条消息。很抱歉给你带来了困惑

<a href="" onclick="showThis('test1');return false;">Test 1</a>
<div class="test1"> <p>some content</p> </div>

<a href="" onclick="showThis('test2');return false;">Test 2</a>
<div class="test2"> <p>some content</p> </div>


<div id="content">  

<!-- if clicked on Test 1, display some message. And if clicked on Test 2, display some other message -->

</div>

一些内容

一些内容

首先，您需要在每个

上设置ID，以便从Javascript获取它们

<a href="" onclick="showThis('test1');return false;">Test 1</a>
<div id="test1"> <p>some content</p> </div>

<a href="" onclick="showThis('test2');return false;">Test 2</a>
<div id="test1"> <p>some content</p> </div>

<div id="content">  
  <!-- if clicked on Test 1, display some message. 
      And if clicked on Test 2, display some other message -->
</div>

html:

js:

---

建议使用离散javascript。

有十几种不同的方法来处理这个问题。大多数都需要对您的标记进行一些小的更改—您当前的方法不是很健壮，也没有很好地降级。这只是一种可能的方式：

<a href="" onclick="showThis('test1');return false;">Test 1</a>
<div id="test1"> <p>some content</p> </div>

<a href="" onclick="showThis('test2');return false;">Test 2</a>
<div id="test1"> <p>some content</p> </div>

<div id="content">  
  <!-- if clicked on Test 1, display some message. 
      And if clicked on Test 2, display some other message -->
</div>

<a href="" id="test1">Test 1</a>
<div class="test1"> <p>some content</p> </div>

<a href="" id="test2">Test 2</a>
<div class="test1"> <p>some content</p> </div>

<div class="content">  
<!-- if clicked on Test 1, display some message. And if clicked on Test 2, display some other message -->
</div>

---

如果我理解得很好，那么在调用“onclick”时，您希望更改“p”元素文本中的“somecontent”

w3schools提供的示例应该是您需要的：

首先，更改：

<div class="content>

---

至少，转到showDiv（）函数并添加如下内容以显示消息

    var message="";
    if(whatever_variable_has_the_argument = "test1")
    {
       message="message for test1"
    }
    else if(whatever_variable_has_the_argument = "test2")
    {
      message="message for test2"
    }
        document.getElementById("content")=message;
// assuming you added the id as "content" too for the content div.

---

如果您愿意导入jQuery，只需执行以下操作：

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function showThis(x) {
  $("#content").html(  $("#"+x).html());
}
</script>

<a href="#" onclick="showThis('test1');">Test 1</a>
<div id="test1" style="display:none;"> <p>some content #1</p> </div>

<a href="#" onclick="showThis('test2');">Test 2</a>
<div id="test2" style="display:none;"> <p>some content #2</p> </div>


<div id="content">
<!-- if clicked on Test 1, display some message. And if clicked on Test 2, display some other message -->
</div>

函数showThis（x）{
$（“#content”）.html（$（“#”+x.html（））；
}
一些内容#1

一些内容#2

---

我测试了这个，它的工作原理和你描述的一样。showThis函数获取您传递给它的任何id div的HTML内容，并将其放在content div中。希望有帮助

+1优质答案。你知道你是谁，你就知道你是谁了，斯潘挥霍：我很愚蠢，我误读了代码。我会取消投票，但除非这篇文章被编辑，否则我不会投票。

document.getElementById('test1').onclick = handleClick;
document.getElementById('test2').onclick = handleClick;

function handleClick(e)
{
    var sender = (e && e.target) || (window.event && window.event.srcElement);
    if(sender.id == "test1")
    {
        showContent('message 1');
    }
    else if(sender.id == "test2")
    {
        showContent('message 2');
    }
    if(window.event)
    {
        window.event.returnValue = false;
    }
    return false;
}

function showContent(msg)
{
    document.getElementById('content').innerHTML = msg;
}

<div class="content>

<div id="content">

var showThis = function(caller){
    switch(caller){
        case "test1":
            document.getElementById("content").innerHTML = "Your content here";
            break;
        case "test2":
            document.getElementById("content").innerHTML = "Your other message";
            break;
        default:
            break; // here just in case you need it
    }
}

    var message="";
    if(whatever_variable_has_the_argument = "test1")
    {
       message="message for test1"
    }
    else if(whatever_variable_has_the_argument = "test2")
    {
      message="message for test2"
    }
        document.getElementById("content")=message;
// assuming you added the id as "content" too for the content div.

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function showThis(x) {
  $("#content").html(  $("#"+x).html());
}
</script>

<a href="#" onclick="showThis('test1');">Test 1</a>
<div id="test1" style="display:none;"> <p>some content #1</p> </div>

<a href="#" onclick="showThis('test2');">Test 2</a>
<div id="test2" style="display:none;"> <p>some content #2</p> </div>


<div id="content">
<!-- if clicked on Test 1, display some message. And if clicked on Test 2, display some other message -->
</div>