显示/隐藏文本区域框+单击时在图像之间切换

Show/hide text area box + swap between image onclick

本文关键字：图像 之间 单击 隐藏 文本 区域 显示      更新时间：2023-09-26

我正在创建表单页面，我想在单击图像时隐藏文本区域框，并交换图像，反之亦然。现在我可以隐藏/显示div，但当文本区域框被隐藏时，图像不会显示，也不会返回到第一个图像。有两个脚本，一个用于div显示/隐藏，另一个用于交换图像。

1. image: output before click
2. image: after hitting on an image


    <script>
    	function showhide(id){ 
    		if (document.getElementById){ 
    			obj = document.getElementById(id); 
    			if (obj.style.display == "none"){ 
    				obj.style.display = ""; 
    			} else { 
    				obj.style.display = "none"; 
    			} 
    		} 
    	} 
    var onImg= "testim.png, valm.png";
    var offImg= "testip.png, valp.png";
    </script>
    <div style="margin-top: 10px; text-align: center;">
    <ul id="text_type_tab" name="text_type_tab">
        <li id="PR_TEXT_TAB" class="tab_active"> <a href="javascript:showhide('textInputField1');"><img src="testim.png" onclick="this.src = (this.src.endsWith(offImg)? onImg : offImg);" align="middle"/></li></a>
    </ul>
    </div>
    <table id="hidden_content" width="80%" align="center" style="margin-bottom: 10px; margin-left: 10px; margin-right: 10px">
    <tr>
        <td colspan="2">
            <textarea id="textInputField1" name="textInputField1" style="resize:vertical; width: 900px;" rows="15" cols="105" wrap="pre" onblur="onTextSubmitFunction('Apply')"></textarea>
        </td>
    </tr>
    </table>
请帮忙。非常感谢，提前！[1] ：https://i.stack.imgur.com/7PwdK.png[2] ：https://i.stack.imgur.com/5j6FE.png

指针1

将以下变量更改为图像的绝对链接

var onImg= "testim.png, valm.png"; //this should be one link
var offImg= "testip.png, valp.png"; //this should be one link

（只是为了测试的安全起见）

示例

 var onImg= "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSHrNNGyEGlgXtd5u4fq1eQ18z8TMXHCZqf_4zI9yz6uo7N8KeXuFVRr-tR";
 var offImg= "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR8x25Dihzxt-pilDC6-SAVJ8JEVB4VItyjJhRFFuAGNFPx5YBbR5rQST01";

指针2

更改

 <li id="PR_TEXT_TAB" class="tab_active"> <a href="javascript:showhide('textInputField1');"><img src="testim.png" onclick="this.src = (this.src.endsWith(offImg)? onImg : offImg);" align="middle"/></li></a>
    </ul>

到这个

 <li id="PR_TEXT_TAB" class="tab_active"> <a href="javascript:showhide('textInputField1');"><img src="testim.png" onclick="this.src = (this.src.endsWith(offImg)? onImg : offImg);" align="middle"/></a></li>
    </ul>

也就是说它应该是</a></li>而不是</li></a>

指针3

更改此

<a href="javascript:showhide('textInputField1');">

到这个

<a href="#" onclick="javascript:showhide('textInputField1')">

将其直接附加到onclick事件，因为href属性只是指向一个位置。

这是的一个片段

-    <script>
    	function showhide(id){ 
    		if (document.getElementById){ 
    			obj = document.getElementById(id); 
          obj.style.display == "none"?obj.style.display = "":obj.style.display = "none"; 
          
    		//	if (obj.style.display == "none"){ 
    		//		obj.style.display = "":; 
    		//	} 
          //else { 
    			//	obj.style.display = "none"; 
    			//} 
    		} 
    	} 
    var onImg= "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSHrNNGyEGlgXtd5u4fq1eQ18z8TMXHCZqf_4zI9yz6uo7N8KeXuFVRr-tR";
    var offImg= "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR8x25Dihzxt-pilDC6-SAVJ8JEVB4VItyjJhRFFuAGNFPx5YBbR5rQST01";
    </script>
    <div style="margin-top: 10px; text-align: center;">
    <ul id="text_type_tab" name="text_type_tab">
        <li id="PR_TEXT_TAB" class="tab_active"> <a href="#" onclick="javascript:showhide('textInputField1')"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR8x25Dihzxt-pilDC6-SAVJ8JEVB4VItyjJhRFFuAGNFPx5YBbR5rQST01" onclick="this.src = (this.src.endsWith(offImg)? onImg : offImg);" align="middle"/></a></li>
    </ul>
    </div>
    <table id="hidden_content" width="80%" align="center" style="margin-bottom: 10px; margin-left: 10px; margin-right: 10px">
    <tr>
        <td colspan="2">
            <textarea id="textInputField1" name="textInputField1" style="resize:vertical; width: 900px;" rows="15" cols="105" wrap="pre" onblur="onTextSubmitFunction('Apply')"></textarea>
        </td>
    </tr>
    </table>

相关文章：