在文本 - 點擊顯示（功能）

我需要一些幫助，請原諒我的新手編程。在文本 - 點擊顯示（功能）

我有這樣的代碼JavaScript的

function toggle_visibility(id) { 
     var e = document.getElementById(id); 
     if(e.style.display == 'block') 
      e.style.display = 'none'; 
     else 
      e.style.display = 'block'; 
}

，這是如何繼承它在我的HTML

<a href="#" onclick="toggle_visibility('something');"><center>Show something</center></a> 

<div id="something" style="display:none;"> 
<p>something</p> 
</div>

它的作用是當有人點擊「顯示的東西」，在div文將出現。我有2個問題，希望你能指導我。

它將被放置在網站上的地方不在開始，當點擊href="#"時，它會使瀏覽器在網站的開始處向上滾動。

請注意，我只需要一個文本點擊。不是一個按鈕。

第二個和可選的是：我可以做任何事情在下面的代碼添加jQuery，以便它在點擊顯示有一點動畫？

來源

2015-03-31 Panagiotis

雖然不贊成你可以在你的錨標記更改爲以下，以避免錨鏈接去到你的頁面的頂部：

<a href="javascript:;" onclick="toggle_visibility('something');"><center>Show something</center></a>

理想的情況是，如果你不使用一個錨定標記實際上並沒有鏈接到某個東西。

來源

2015-03-31 22:53:00 xengravity

其實工作！非常感謝@ xengravity – Panagiotis 2015-03-31 22:57:09

代替「＃」用javascript：無效（0）

<a href="javascript:void(0)" onclick="toggle_visibility('something');"><center>Show something</center></a>

更多信息here：

來源

2015-03-31 22:53:29 Sammy

那麼你可以去這個以多種方式。既然你使用Javascript，你可以改變你想要顯示的文本的容器的不透明度，或者（如果你有jQuery），你可以顯示（）和隱藏（）你想顯示的內容。

實施例使用jQuery：

function show_hide() { 
var tracker = 1; 
    $('.div_name').click(function() { 
     if (tracker == 1) { 
      $('.div_name a').show(); 
      tracker = 2; 
     } 
     else if (tracker == 2) { 
      $('.div_name a').hide(); 
      tracker = 1; 
     } 
    }); 
}

確保調用show_hide（）;在的document.ready

來源

2015-03-31 22:56:56 Karmaxdw

感謝您的時間@Karamxdw :) – Panagiotis 2015-03-31 23:48:15

Yessiree @Panagiotis – Karmaxdw 2015-04-01 00:22:05

既然你一定要使用jQuery的，我建議如下：

JS：

$(function(){ //execute this when dom is ready 
    $("#toggle").click(function(e){ // like 'onclick', this function is called then the element with the id 'toggle' is clicked 
     $("#something").fadeToggle(300); // toggle visibility with a 300ms fade animation 
     e.preventDefault(); //prevent the default click action, in this case scrolling to top 
    }); 
});

HTML：

<a href="#" id="toggle"><center>Show something</center></a> 
<div id="something" style="display:none;"> 
<p>something</p> 
</div>

不要忘了包括jQuery在你的HTML中：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

來源

2015-03-31 22:58:00 user1950929

感謝您的時間。它會很好，但我不能讓它工作..http：//jsfiddle.net/vzmnJ/3554/ – Panagiotis 2015-03-31 23:20:23

在一個真正的html頁面它會工作，在jsfiddle你必須從左側的下拉列表中引用jquery和不在'

<中心>已被棄用，這意味着它不再明智的使用。最好在CSS文件中調整位置。還建議不要在元素上使用類似於style =「」的內聯樣式，還應將其放置在CSS文件中。不建議使用onclick事件，而是添加一個事件監聽器。

這裏有一個的jsfiddle對於如何可以實現這些東西的普通的JavaScript版本：https://jsfiddle.net/u8zc6yfo/2/

window.onload = function() { 
var clickableItems = document.getElementsByClassName("clickable"); 
for (var i = 0; i < clickableItems.length; i++) { 
    clickableItems[i].addEventListener("click", function() { 
     toggle_visibility(this.id); 
    }); 
} 

} 

function toggle_visibility(id) { 
    var getToggleItem = document.getElementById(id).getAttribute("data-toggle"); 
    var e = document.getElementById(getToggleItem); 
    (e.style.display != "block") ? e.style.display = "block" : e.style.display = "none"; 
}

和HTML：

<div class="wrapper"> 
<span id="toggleshowsomething" data-toggle="something" class="clickable center">Show something</span> 

<div id="something"> 
    <p>something</p> 
</div>

和CSS：

.wrapper { 
width: 300px; 
margin:0px auto; 
} 
.clickable { 
color: blue; 
cursor: pointer; 
} 
.clickable:hover { 
color: purple; 
} 
#something { 
display: none; 
} 
}

完全是這樣的，任何分配了類「可點擊」的項目都會添加一個事件監聽器。當單擊該項目時，由於您希望它切換不同的元素，因此可以將其存儲在數據切換中：「whateverIdYouWantToPointTo」 - 然後通過三元語句：（布爾檢查）？真假 ; 確定具有data-toggle中列出的id的項目是否隱藏。我這樣做是因爲如果沒有顯示屬性設置，你的代碼將不會考慮。

(e.style.display != "block") ? //says to check if display is not shown as block 
//this is what to do if it returns true 
e.style.display = "block"; 
//show element 
: 
//this is what to do if it returns false 
e.style.display = "none"; 
//hide element 
}

然後爲了完整起見，我做了一個JQuery的樣機可以發現：https://jsfiddle.net/o6wozosu/

window.onload = function() { 
    $(".clickable").on("click", function() { 
    var useId = $(this).attr("data-toggle"); 

    $("#" + useId).fadeToggle(); 
    }); 
    }

這是同樣的事情。您可以使用fadeToggle（）方法執行動畫輸入和輸出.toggle（）;只是突然改變顯示。還有.animate（{}），它採用不同的CSS變量，並允許通過JQuery進行流暢的動畫。你可以閱讀這裏的文檔：

來源

2015-03-31 23:44:14 zfrisch

關於CSS我應該做你的方式，而不是內聯這是真的！關於代碼：完美工作（沒有聽說過onclick函數和事件），雖然沒有jQuery的動畫。你相信我不應該在我的代碼上使用這些動畫？感謝您的時間和建議。 :) – Panagiotis 2015-04-01 00:06:46

這不是要削減你或任何東西，我絕對使用內聯樣式和onclick當我嘲笑的事情。有時候比從文件跳到文件更容易！不幸的是只是不推薦，因爲它可能會導致代碼本身的混亂。如果你有20萬行代碼，找到一種風格=「」可能會很痛苦，尤其是如果你沒有寫出它的話。你一定可以在你的代碼中有動畫。在我的帖子的底部附近，我給你提供了一個我已經完成的JQuery版本，並且向.animate（）的方向指出了你的意思。和一些JQuery切換功能。 – zfrisch 2015-04-01 00:11:18

http://jsfiddle.net/u2nw1Lvj/1/ 下面是關於動畫方法如何工作的一個小想法！ – zfrisch 2015-04-01 00:31:43

相關問題

在文本 - 點擊顯示（功能）

回答

相關問題