搜索脚本,可以在没有框架的情况下显示/隐藏功能。显示/隐藏无框架
喜欢的东西:
<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