如何在单击链接时更改内联css样式？

Question

我有一个隐藏的内联style="display: none;"

我怎么能将这种风格改为style="display: inline;" 当点击页面上的链接时？

Answer 1

Prety简单

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

更新

---

jQuery是一个轻量级的JavaScript库，可以做很多很酷的东西，从开发人员那边编写一个非常少的脚本。

首先，我建议你阅读“ jQuery如何工作？ ”，它具有开始使用jQuery所需的一切。

---

我将解释我在小提琴中写的代码。

首先是链接和表单

<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

   });
});

希望它足够让你开始。

Answer 2

在锚点上绑定一个onclick事件，并将表单样式设置为display:block ，这是一个帮助你前进的小提琴

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

Answer 3

首先，您需要找到一些使用JavaScript选择表单的方法; 这是一个函数，假设您的表单具有myform的id属性：

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

然后，将该函数绑定到链接的click事件。 一种快速而肮脏的方法是将链接的onclick属性设置为showForm(); return false showForm(); return false ，但您可能希望在外部JavaScript中这样做，以便很好地分离您的内容和行为。

Answer 4

嘿检查这个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;');
}); 

Answer 5

这里有更多的Codez

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