Question

点击显示以下div。如何根据单击使其在div“内容”中显示不同的消息。我已经有了javascript来显示div的Test1和Test2。我只是想添加一个消息给div“内容”的能力。对不起，感到困惑。

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

Answer 1

有十几种不同的方法可以解决这个问题。大多数都需要对标记进行一些小的更改 - 您当前的方法不是非常强大，并且不会非常优雅地降级。这只是一种可能的方式：

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

以编程方式分配点击处理程序：

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

Answer 2

首先，改变：

<div class="content>

到

<div id="content">

然后（不使用像jQuery这样的库）：

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

Answer 3

首先，您需要在每个<div>上设置ID，以便您可以通过Javascript获取ID。

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

如果您不希望 test1 和 test2 div显示，请在每个style="display: none;" id=""部分之后添加<div> }}

现在我假设您想要获取 test1 或 test2 的内容，并将这些内容放入内容 div中。这是一个可以做到的小功能：

function showThis(id) {
  document.getElementById('content').innerHTML = document.getElementById(id).innerHTML;
}

Answer 4

如果您愿意导入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函数抓取你传递它的id'd div的HTML内容，并将它放在内容div中。希望有所帮助！

Answer 5

HTML：

<div class="msg" id="test_1" onclick="showThis('test_1');return false;>message</div>
<div class="msg" id="test_2" onclick="showThis('test_2');return false;>message 2</div>

的CSS：

div.msg{ display: none;}

JS：

showThis(param){
    document.getElementById(param).style.display = 'block';  //or equivalent framework call
}

并且建议使用离散的javascript。

Answer 6

如果我理解得很好，你想在调用“onclick”时更改“p”元素文本中的“some content”。

w3schools的这个例子应该是你所需要的：http://www.w3schools.com/htmldom/prop_anchor_innerhtml.asp

Answer 7

至少，请转到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.

Javascript if / else onclick？

7 个答案: