如何在單擊鏈接時更改內聯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>