Question

首先抱歉我的英语 - 我尽我所能 - 希望你能理解我的意思。如果不只是问我再试一次......

我需要一些JavaScript帮助。我在网上找到了这个JavaScript函数，它非常适合。

尽管如此，有两件事我想改变，但不知道如何。

1）由于样式表，第一个DIV元素(ID=test)可见。如果我点击任何其他单选按钮或链接，则不应再显示此div元素(id=test)，而应显示我点击的div的内容。

（只需使用代码，你就会看到我的意思 - 希望如此）

2）如果我点击任何链接，是否有机会检查相应的单选按钮？在此代码中，只有单击单选按钮才会显示内容。如果你点击链接（它应该与单选按钮功能相同），它什么都不做。

希望有人可以帮助我。

<html>    
<head>
      <title></title>
    <script type="text/javascript">
    function showHide(d){
     var div = document.getElementById(d);
     if (showHide.div&&div!=showHide.div){
      showHide.div.style.display='none';
     }
     div.style.display = div.style.display != 'block'?'block':'none';
     showHide.div=div;
    }
    </script>     
    </head>
    <body>
    <form action="" method="post" name="form1" target="_self">
            <input type="radio" id="input1" name="auswahl" onclick="javascript:showHide('test','input1');" checked><a href="#" onclick="javascript:showHideRadio('test','input1');">Test</a></li> <br/>
            <input type="radio" id="input2" name="auswahl" onclick="javascript:showHide('question','input2');"><a href="#" onclick="javascript:showHideRadio('question','input2');">Questions</a></li> <br/>
            <input type="radio" id="input3" name="auswahl" onclick="javascript:showHide('more','input3');"><a href="#" onclick="javascript:showHideRadio('more','input3');">More</a></li> <br/>
          </form>
    </body>
    <div id="test" style="display: visible">
    <h3>This div element belongs to id="TEST" </h3>
    </div>
    <div id="question" style="display: none">
    Question
    </div>
    <div id="more" style="display: none">
    <p>Here is more Content</p>
    </div>
    </html>

Answer 1

首先你没有定义

showHideRadio

脚本中的任何位置。如果你想让你的链接执行与单选按钮相同的功能，请保持功能名称相同...还要在body标签内定义你想要的元素

尝试以下代码

<html>
<head>
<title></title>
<script type="text/javascript">
function showHide(d){
var div = document.getElementById(d);
if (showHide.div&&div!=showHide.div){
showHide.div.style.display='none';
}
div.style.display = div.style.display != 'block'?'block':'none';
showHide.div=div;
}
</script>     
</head>
<body>
<form action="" method="post" name="form1" target="_self">
<input type="radio" id="input1" name="auswahl"    onclick="javascript:showHide('test','input1');" checked><a href="javascript:void(0);" onclick="javascript:showHide('test','input1');">Test</a></li> <br/>
 <input type="radio" id="input2" name="auswahl" onclick="javascript:showHide('question','input2');"><a href="javascript:void(0);" onclick="javascript:showHide('question','input2');">Questions</a></li> <br/>
  <input type="radio" id="input3" name="auswahl" onclick="javascript:showHide('more','input3');"><a href="javascript:void(0);" onclick="javascript:showHide('more','input3');">More</a></li> <br/>
  </form>

<div id="test" style="display: visible">
<h3>This div element belongs to id="TEST" </h3>
</div>
<div id="question" style="display: none">
Question
</div>
<div id="more" style="display: none">
<p>Here is more Content</p>
</div>
</body>
</html>

如果您想要在链接上选择单选按钮，请单击定义您的功能'showHideRadio'并将其添加到您的链接中

document.getElementById(yourradioid).checked = true;

并保持相同

Answer 2

我认为这段代码对你来说更容易理解......你必须定义这个函数 showHideRadio（）

<html>
    <head>
      <title></title>
    <script type="text/javascript">
    function showHide(){
        if (document.getElementById('input1').checked == true)
        {
            document.getElementById('test').style.display='block';
            document.getElementById('question').style.display='none';
            document.getElementById('more').style.display='none';
        }
        else if (document.getElementById('input2').checked == true)
        {
            document.getElementById('test').style.display='none';
            document.getElementById('question').style.display='block';
            document.getElementById('more').style.display='none';
        }
        else if (document.getElementById('input3').checked == true)
        {
            document.getElementById('test').style.display='none';
            document.getElementById('question').style.display='none';
            document.getElementById('more').style.display='block';
        }
    }
    function showHideRadio(radioId)
    {
        document.getElementById(radioId).checked=true;
        showHide();
    }
    </script>     
    </head>
    <body>
    <form action="" method="post" name="form1" target="_self">
            <input type="radio" id="input1" name="auswahl" onclick="javascript:showHide();" checked><a href="#" onclick="javascript:showHideRadio('input1');">Test</a></li> <br/>
            <input type="radio" id="input2" name="auswahl" onclick="javascript:showHide();"><a href="#" onclick="javascript:showHideRadio('input2');">Questions</a></li> <br/>
            <input type="radio" id="input3" name="auswahl" onclick="javascript:showHide();"><a href="#" onclick="javascript:showHideRadio('input3');">More</a></li> <br/>
          </form>
    </body>
    <div id="test" style="display: visible">
    <h3>This div element belongs to id="TEST" </h3>
    </div>
    <div id="question" style="display: none">
    Question
    </div>
    <div id="more" style="display: none">
    <p>Here is more Content</p>
    </div>
    </html>

检查带有链接/替换内容的单选按钮

2 个答案: