搜索腳本,可以在沒有框架的情況下顯示/隱藏功能。顯示/隱藏無框架
喜歡的東西:
<span rel="toggle" href="/somelink.html">Title</span>
<div class="toggle">Hidden block</div>
.toggle { display: none; }
塊.toggle
應該點擊span
後顯示。像jQuery上的toggle()
一樣。
謝謝。
搜索腳本,可以在沒有框架的情況下顯示/隱藏功能。顯示/隱藏無框架
喜歡的東西:
<span rel="toggle" href="/somelink.html">Title</span>
<div class="toggle">Hidden block</div>
.toggle { display: none; }
塊.toggle
應該點擊span
後顯示。像jQuery上的toggle()
一樣。
謝謝。
看看這裏創建一個getElementByClass功能 - http://www.dustindiaz.com/getelementsbyclass/
然後像這樣(沒有檢查它是否工作,但你的想法):
toggleItem = function(){
var item = getElementByClass('toggle')[0];
if (item.style.display == "block")
{
item.style.display = 'none';
}
else
{
item.style.display = 'block';
}
}
關於的onclick事件呢? – Happy 2010-07-02 16:20:38
通過上面的例子,只需使用'' – casablanca 2010-07-02 16:25:08
display inline? – galambalazs 2010-07-02 16:32:22
我會創建兩個方法,添加/刪除toggle
類本地JavaScript:
function show(element) {
element.className += " toggle";
}
function hide(element) {
element.className = (element.className).replace(/\s*toggle/g, "");
}
你需要的是放置在跨度onclick
事件代碼。你熟悉這個嗎?
也許,'/ \ s * toggle/g'在沒有前導空格的情況下替換爲空格字符? – tvanfosson 2010-07-02 16:18:20
不允許使用內聯javascript – Happy 2010-07-02 16:20:09
@tvanfosson,如果您可靠地使用'show' /'hide',則不會發生這種情況。儘管如此,我已經更新了代碼,因爲它仍然是一個好主意。 @快樂,它不是內聯的。把這與你的其他JavaScript。 – 2010-07-02 16:47:22
這在使用一個ID隱藏塊來找出哪個div切換。這是假設您想要每個可點擊範圍切換一個塊。該事件偵聽器的方法是一個W3C標準,但我不知道,如果IE瀏覽器實現它 - 做一些測試,以確保萬無一失。
HTML:
<!-- the rel attribute in the span specifies which div to toggle -->
<span rel="target" id="trigger">Title</span>
<div id="target">Hidden block</div>
的JavaScript,進去一個腳本塊在你的頭上或在一個單獨的.js文件:
window.addEventListener('load', init, false);
function init() {
document.getElementById('trigger').addEventListener(
'click',
function() {
targetId = this.getAttribute('rel');
var element = document.getElementById(targetId);
if (element.style.display == 'block')
element.style.display = 'none';
else
element.style.display = 'block';
},
false
);
}
在那裏,在你的HTML沒有JS。
順便說一句,如果你有多個可點擊的跨度,你可以爲每個跨度分配一個類,如「觸發」。然後在init()函數中,將事件偵聽器註冊放入一個將偵聽器附加到具有「觸發器」類的所有內容的循環中。 – Jeff 2010-07-02 17:02:12
看起來不錯,但不適合我。 – Happy 2010-07-02 17:04:33
對不起,但CSS顯示可以有更多的價值,而不僅僅是2:http://www.w3schools.com/css/pr_class_display.asp – galambalazs 2010-07-02 17:05:36
HTML
<span rel="hidden" href="/somelink.html" onclick="toggle(this)">Title</span>
<div class="toggle" id="hidden">Hidden block</div>
的Javascript
function toggle(el) {
if (!el.getAttribute("rel")) return;
el = document.getElementById(el.getAttribute("rel"));
var cname = " " + el.className + " ";
if (cname.indexOf("toggle") !== -1) {
cname = cname.replace(" toggle ", " ");
el.className = cname.substring(1, cname.length-1);
} else {
el.className += " toggle";
}
}
謝謝,但內聯javascript無效 – Happy 2010-07-02 17:05:33
真的嗎?你有沒有閱讀規範? http://www.w3.org/TR/REC-html40/interact/scripts.html – galambalazs 2010-07-02 17:12:11
首先,有這將爲你給什麼元素,它獨特的切換功能的函數。然後,我們等待窗口加載,當它發生時,我們創建一些切換功能。在這個例子中,我們假設你有一個元素與ID =「SOME_ID」,但你可以使用任何你需要獲得一個元素。然後,我們將切換函數粘貼到一個全局變量中。
// returns a function that will toggle the given element function makeToggleFunction(el) { var element = el; return function() { if (element.style.display == 'none') element.style.display = 'block'; else element.style.display = 'none'; }; } window.addEventListener('load', on_window_load, false); var GLOBAL = {}; function on_window_load() { GLOBAL.toggle_element = makeToggleFunction(document.getElementById('some_id')); }
然後,您可以隨時切換元素,使用GLOBAL.toggle_element()
。
另外,我覺得這是IE瀏覽器的代碼,如果你想等待頁面加載。
document.addEventListener("DOMContentLoaded", on_window_load, false);
編輯:
添加此功能(從http://www.dustindiaz.com/getelementsbyclass/由programatique作爲mentioed)
function getElementsByClass(searchClass,node,tag) { var classElements = new Array(); if (node == null) node = document; if (tag == null) tag = '*'; var els = node.getElementsByTagName(tag); var elsLen = els.length; var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"); for (i = 0, j = 0; i < elsLen; i++) { if (pattern.test(els[i].className)) { classElements[j] = els[i]; j++; } } return classElements; }
然後添加功能on_window_load
內的以下內容:
GLOBAL.toggleable = new Array(); or each(var element in getElementsByClass('toggle')) { GLOBAL.toggleable.push(makeToggleFunction(element)); } GLOBAL.toggle_all = function() { for each(var f in GLOBAL.toggleable) { f.call(); } };
現在您可以撥打GLOBAL.toggle_all()
,它會隱藏所有類別爲toggle
的元素。
你想從我們這裏得到什麼? – Rihards 2010-07-02 16:14:06
啊,你在發佈我的答案時添加了新的要求,表明沒有內聯。我將使用不使用任何內嵌JavaScript的解決方案更新我的答案。 – Jeff 2010-07-02 16:47:39
爲什麼沒有內嵌的JavaScript? – galambalazs 2010-07-02 16:50:42