点击链接时如何更改内联CSS样式？

Question

我有一个表单，使用内联样式style="display: none;"进行隐藏。

当页面上的链接被点击时，如何动态更改这个样式为style="display: inline;"？

- Lucas Matos

---

你需要JavaScript。 - j08691

哦，好的，我现在就去做。抱歉。 - Lucas Matos

Answer 1

很简单。

<a href="#" onclick="document.getElementById('myform').style.display = 'inline';">Click me</a>

更新

---

jQuery是一个轻量级的JavaScript库，可以通过少量的脚本实现许多很酷的功能。

首先，我建议您阅读"jQuery如何工作？"，它包含了您需要开始使用jQuery所需的所有信息。

---

我将解释一下我在fiddle中编写的代码。

首先是链接和表单。

<a id="linktotoggle" href="#">Click Me</a>
<form id="formtotoggle"></form>

记住上面链接和表单中的id。这是我们将要在脚本中选择元素的方式，就像document.getElementById()一样。

默认情况下，让表单隐藏起来。

#formtotoggle { display: none; }

现在让我们编写jQuery代码

$(document).ready(function() {
// ^ This is an event, which triggers once all the document is loaded so that the manipulation is always guaranteed to run.
   $("#linktotoggle").click(function() {
   // ^ Attach a click event to our link
        $("#formtotoggle").toggle();
        // ^ select the form and toggle its display

   });
});

希望这足以让您开始了解。

- Starx

---

当我点击时它显示表格，但再次点击时不隐藏表格。 - Lucas Matos

@LucasMatos，使用 display = 'none' 来隐藏表单，而不是使用 display:inline。 - Starx

@LucasMatos，让我猜猜，你想在单击按钮时隐藏和显示表单。 - Starx

@LucasMatos，我用jquery制作了一个演示。希望能有所帮助。 - Starx

这正是我需要的，但您能告诉我如何创建这个jQuery函数吗？它类似于JavaScript还是其他什么？ - Lucas Matos

@LucasMatos，对不起，我出去了。jQuery是JavaScript库。它简化了很多你可以使用JavaScript完成的事情。我会更新我的答案，让你能够更好地理解。 - Starx

Answer 2

你需要先使用JavaScript找到一种选择表单的方法；以下是一个函数，假设你的表单具有id属性为myform：

function showForm() {
    document.getElementById('myform').style.display = 'inline';
}

然后，只需将该函数绑定到您的链接的click事件上。一种快速而简单的方法是将链接的onclick属性设置为showForm(); return false，但您可能希望在外部JavaScript中执行此操作，以便将内容和行为分开。

- Ry-

Answer 3

嘿，看看这个 JQuery。

用于展示。

$("#lnk").click(function () {  
$("#result").removeAttr('Style');
$("#result").attr('Style','display: inline;'); // this 
$("#result").attr('Style','display: block;'); // or this

}); 

隐藏

$("#lnk").click(function () {  
$("#result").removeAttr('Style');
$("#result").attr('Style','display: none;');
}); 

- Sanjay Goswami

---

嘿，检查一下代码，我已经更新了以便您理解。它会在单击链接时起作用（将您的控件ID分配给#lnk而不是#<yourcontrol id>）。 - Sanjay Goswami

Answer 4

这里是更多的代码

 <a href="#" id="yourlink">yourlink</a>
    <form id="yourform" style="display:none;">form here.</form>
    <script>
    $(document).ready(function () {
        $('#yourlink').click(function () {
            $('#yourform').css('display', 'inline');
        });
    });
    </script>

- Scott Weaver

Answer 5

在锚点上绑定一个onclick事件，并将表单样式设置为display:block，以下是一个 js fiddle 帮助你进行操作。

http://jsfiddle.net/ZUgPv/1/

- Andreas Wong