Question

当鼠标点击链接时，是否有一种方法可以调用输入项目使其显示。然后当点击输入项目以外的任何内容时，它会使输入项目再次消失。

编辑 - 添加了示例编辑2 - 修复Emample

<html>
<head>
<style>
#sch{
display:none;
}
</style>
</head>
<body>
<a href="">Search</a>

<form align = "center" id = "search">
    <input id = "sch" type = "text" name = "search" placeholder = "Search Here"></br>
</form>

Answer 1

如果只有Display的目的，你可以通过JavaScript onclick函数来完成。

所以用css使你的输入显示：你的页面加载时没有，但当你点击调用JavaScript并显示它时：阻止

但是如果你想插入一些值并将它们保存到数据库继续相同的过程并添加ajax。

例如

<div>
    <a id="1">link1</a><input type="text" name="t1" class="hid" id="t1" /><br>
    <a id="2">link2</a><input type="text" name="t1" class="hid" id="t2" /><br>
    <a id="3">link3</a><input type="text" name="t1" class="hid" id="t3" /><br>
</div>

你的CSS

<style>
        .hid{
   display: none;
}
    </style>

你的JS

<script>

        $(document).ready(function(){
            $("a").on("click", function(){
                $("#t1").css("display","none");
                $("#t2").css("display","none");
                $("#t3").css("display","none");

                var Aid = $(this).attr("id");
                $("#t"+Aid).css("display","block");
            });

        });
</script>

Answer 2

HTML用于构建页面，而不是用于动画页面，因此请尝试使用 Javascript 或 jQuery 。尝试使用像...这样的东西。

document.ready(function(){

$("a").onClick(function(){
$("sh").fadeIn(200)
});
});

我不知道它是否完全，但你明白了。

希望，我帮助了你。

HTML - 鼠标检测 - 链接

2 个答案: