我是javascript的新手,所以请耐心等待。我试图在我已经完成的点击上显示一个跨度,但是我需要它在单击另一个链接后返回隐藏状态。这是我到目前为止所做的。
<html>
<head>
<style>
aside.apps{
position:relative;
}
span.socialApp{
visibility:hidden;
position:absolute;
top:20px;
left: 0;
background-color:#e9e9e9;
}
</style>
<script>
var state = 'hidden';
function showApp(a) {
if (state == 'visible') {
state = 'hidden';
}
else {
state = 'visible';
}
if (document.getElementById && !document.all) {
x = document.getElementById(a);
x.style.visibility = state;
}
}
</script>
</head>
<body>
<aside class="apps">
<a href="javascript://" onclick="showApp('app1');">link1</a>
<span class="socialApp" id="app1">stuff goes here1</span>
<a href="javascript://" onclick="showApp('app2');">link2</a>
<span class="socialApp" id="app2">stuff goes here2</span>
<a href="javascript://" onclick="showApp('app3');">link3</a>
<span class="socialApp" id="app3">stuff goes here3</span>
<a href="javascript://" onclick="showApp('app4');">link4</a>
<span class="socialApp" id="app4">stuff goes here4</span>
</aside>
</body>
</html>
当点击link1时,会出现app1,然后点击link2后,app2会出现在link1的顶部。当link2关闭时,link1仍然可见。我需要检查所有4并使所有隐藏,除了当前选择。
答案 0 :(得分:2)
轻微更新;该功能现在是独立的。
This should work how you want;它会拉出正确的范围,如果再次点击它会再次隐藏它。
这是代码:
<aside class="apps" id="aside">
<a href="#" onclick="showApp('app1');">link1</a>
<span class="socialApp" id="app1">stuff goes here1</span>
<a href="#" onclick="showApp('app2');">link2</a>
<span class="socialApp" id="app2">stuff goes here2</span>
<a href="#" onclick="showApp('app3');">link3</a>
<span class="socialApp" id="app3">stuff goes here3</span>
<a href="#" onclick="showApp('app4');">link4</a>
<span class="socialApp" id="app4">stuff goes here4</span>
</aside>
function showApp(a) {
var aside = document.getElementById('aside');
var arr = aside.getElementsByTagName('span');
for (i = 0; i < arr.length; i++) {
if (arr[i].getAttribute('id') != a) {
arr[i].style.visibility = 'hidden';
}
}
var state;
x = document.getElementById(a);
if (x.style.visibility == 'visible') {
state = 'hidden';
}
else {
state = 'visible';
}
x.style.visibility = state;
}
答案 1 :(得分:2)
我建议使用JQuery。它具有跨浏览器支持,可以简单地完成这样的操作;)。
在您的代码中加入以下内容
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
这是新脚本
<script type="text/javascript">
function showApp(a) {
$(".selected").removeClass("selected");
$(a).addClass("selected");
};
</script>
将您的HTML更改为此
<aside class="apps">
<a href="#" onclick="showApp('#app1');">link1</a>
<span class="socialApp" id="app1">stuff goes here1</span>
<a href="#" onclick="showApp('#app2');">link2</a>
<span class="socialApp" id="app2">stuff goes here2</span>
<a href="#" onclick="showApp('#app3');">link3</a>
<span class="socialApp" id="app3">stuff goes here3</span>
<a href="#" onclick="showApp('#app4');">link4</a>
<span class="socialApp" id="app4">stuff goes here4</span>
</aside>
将您的CSS改为此
.apps{
position:relative;
}
.socialApp{
visibility:hidden;
position:absolute;
top:20px;
left: 0;
background-color:#e9e9e9;
}
.selected {
visibility: visible;
}
JSFiddle示例:http://jsfiddle.net/peterf/u2SFL/
答案 2 :(得分:1)
我的坏,编辑了答案,它会对你有所帮助。我不认为,有任何需要使用变量。只需隐藏所有跨度,然后将您传递的那个显示为变量。
<html>
<head>
<style>
aside.apps{
position:relative;
}
span.socialApp{
visibility:hidden;
position:absolute;
top:20px;
left: 0;
background-color:#e9e9e9;
}
</style>
<script>
function showApp(a) {
var aside = document.getElementById('myaside');
var spans = aside.getElementsByTagName('span');
for(i=0,len=spans.length;i<len;i++){
spans[i].style.visibility = 'hidden';
}
x = document.getElementById(a);
x.style.visibility = 'visible';
}
</script>
</head>
<body>
<aside class="apps" id="myaside">
<a href="javascript://" onclick="showApp('app1');">link1</a>
<span class="socialApp" id="app1">stuff goes here1</span>
<a href="javascript://" onclick="showApp('app2');">link2</a>
<span class="socialApp" id="app2">stuff goes here2</span>
<a href="javascript://" onclick="showApp('app3');">link3</a>
<span class="socialApp" id="app3">stuff goes here3</span>
<a href="javascript://" onclick="showApp('app4');">link4</a>
<span class="socialApp" id="app4">stuff goes here4</span>
</aside>
</body>
</html>
更新:
由于你是javascript的新手,所以不要深入研究jQuery,因为它对其他人来说更容易,而且只要你问,他们就会抛出代码。
不是我,但是所有优秀的javascript开发人员建议你在学习它的框架之前学习javascript。
此外,jQuery可以简化代码并简化代码和单独的标记和javascript。
你不应该现在但是如果你愿意稍后再试,你应该遵循这样的方法。 (没有onclick标记和更简单的代码)
<html>
<head>
<style>
aside.apps{
position:relative;
}
span.socialApp{
display:none;
position:absolute;
top:20px;
left: 0;
background-color:#e9e9e9;
}
</style>
<script src='http://code.jquery.com/jquery-latest.min.js'></script>
<script>
$(document).ready(function(){
$('aside').on('click','a',function(){ // This lines says that select aside and fire onclick even on click of anchor tag inside it
$(this).parent().find('span').hide(); // $(this) is the clicked anchor
$(this).next('span').show(); // Find the span next to clicked anchor and show it i.e. display:block
})
})
</script>
</head>
<body>
<aside class="apps">
<a href="javascript:void(0);">link1</a>
<span class="socialApp" id="app1">stuff goes here1</span>
<a href="javascript:void(0);" >link2</a>
<span class="socialApp" id="app2">stuff goes here2</span>
<a href="javascript:void(0);" >link3</a>
<span class="socialApp" id="app3">stuff goes here3</span>
<a href="javascript:void(0);" >link4</a>
<span class="socialApp" id="app4">stuff goes here4</span>
</aside>
</body>
</html>
答案 3 :(得分:1)
您应该跟踪变量中的当前可见项目(最初为null
)。
每次调用showApp
时,都会隐藏当前可见的项目。
然后使刚刚点击的跨度可见,并记住它现在是当前可见的项目(除非刚刚点击的那个是直到现在才可见的那个 - 在这种情况下你不应该使任何东西可见,不再有当前可见的项目。)
答案 4 :(得分:1)
欢迎来到Stack Overflow!
首先,我建议您使用jQuery帮助您使用JavaScript。 jQuery(以及其他类似的框架,如Zepto,MooTools和Dojo)可以解决JavaScript中的一些问题,例如cross browser inconsistencies和make things a lot easier。要在项目中包含jQuery,您只需在页面的<head>
标记中添加以下内容:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
现在您可以访问jQuery,您可以删除添加到onclick
代码中的所有<a>
属性。不鼓励使用onclick
标签,因为它可以追溯到Web开发的早期阶段,之后(几乎)同意DOM级别1标准。相反,建议您绑定到“click”事件 - 这将有助于保持HTML和JavaScript分离,从而使您的JavaScript更易于阅读和调试。
jQuery使得将处理程序(函数)绑定到click事件非常容易,只需要使用on
语法:
// #id is the 'id' attribute of the element you want to add a click handler to.
$('#id').on('click', function () { alert("Clicked!"); });
jQuery还提供了一种快速简便的方法,可以通过show
和hide
在页面上显示和隐藏元素,以下是它的工作原理:
// Again, #id is the id attribute of the element you want to show/hide.
$('#id').show(); // Make a hidden element visible.
$('#id').hide(); // Hide a visible element.
这里唯一需要注意的是,当你使用jQuery“隐藏”一个元素时,它实际上设置了元素的display
CSS属性。在上面的代码中,您通过切换visibility
属性来隐藏元素。
答案的最后部分在于我们当前可见的元素;这可以通过添加一个新变量来实现,该变量跟踪正在显示的元素 - 您可以在我修改后的代码中看到这一点。
<html>
<head>
<style>
span.socialApp {
/* use display: none instead of visibilty: hidden */
display: none;
position:absolute;
top:20px;
left: 0;
background-color:#e9e9e9;
}
</style>
<!-- include jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- Script for toggle apps -->
<script>
// Create an Array of all the app names.
var apps = [ 'app1', 'app2', 'app3' ];
// Variable which keeps track of which app is currently visible
var visibleAppName = null;
function onLinkClicked(event) {
// Get the id of the link that was clicked.
var linkName = event.target.id;
// Strip off the '-link' from the end of the linkName
var dashIndex = linkName.indexOf('-link');
var appName = linkName.substr(0, dashIndex);
// Call show app with the correct appName.
showApp(appName);
}
function showApp(appNameToShow) {
// Hide the currently visible app (if there is one!)
if (visibleAppName !== null) {
$('#' + visibleAppName).hide();
}
// And show the one passed
$('#' + appNameToShow).show();
// Update the visibleApp property.
visibleAppName = appNameToShow;
}
// $(document).ready waits for the page to finish rendering
$(document).ready(function () {
// Walk through the Array of Apps and add a click handler to
// it's respective link.
apps.forEach(function(name) {
$('#' + name + '-link').on('click', onLinkClicked);
});
});
</script>
</head>
<body>
<aside class="apps">
<a href="#" id="app1-link">link1</a>
<span class="socialApp" id="app1">stuff goes here1</span>
<a href="#" id="app2-link">link2</a>
<span class="socialApp" id="app2">stuff goes here2</span>
<a href="#" id="app3-link">link2</a>
<span class="socialApp" id="app3">stuff goes here3</span>
</aside>
</body>
</html>
如果您希望了解有关JavaScript开发的更多信息,那么我建议您阅读Object Orientation JavaScript,其中提供了对该语言及其一些怪癖的精彩介绍。