繁体   English   中英

javascript标签不起作用?

javascript tab doesn't work?

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我是javascript的新手。 所以首先我不想使用jquery来获取选项卡。 以下是我的代码。 但是它不起作用。如何更正我的代码。 谢谢。

.web_index{ position:relative;}
.web_index div{ width:400px; height:300px; background:#eee; position:absolute; left:30px;top:100px; }
ul li{ float: left; width:100px; height:30px; line-height:30px; list-style:none;}

<script type="text/javascript">
    function clicker(){
        var lier=document.getElementsByTagName("li");
        var diver=document.getElementsByClassName("web_index").getElementsByTagName("div");

        for(var i=0;i<lier.length;i++){
            for(j=0;j<diver.length;j++){
                if(i==j)
                    diver[j].style.display=block;
                }else{
                    diver[j].style.display=none;
                }   
            }
        }
    }   
</script>

</head>

<body >
<ul>
    <li onclick="clicker()" class="li01">one</li>
    <li onclick="clicker()" class="li02">two</li>
    <li onclick="clicker()" class="li03">three</li>
    <div class="web_clear"></div>
</ul>
<div class="web_index">
<div style="display:block" >content one</div>
<div style="display:none">content two</div>
<div style="display:none">content three</div>
</div>

我想单击one然后显示content one内容。所有内容都被隐藏。 两个然后显示content two ...

1 个回复

请参阅,关于您实施标签的问题,我建议您采取更好的方法。 相同的clicker函数可以接受DIV ID的参数,并且可以在调用它时将其传递。

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <title>Tabs</title>
  <meta name="viewport" content="width=device-width">
  <style type="text/css">
    .web_index div {width: 400px; height: 300px; background: #eee;}
    ul li{width: 100px; height: 30px; line-height: 30px; list-style: none; display: inline-block; *display: inline; zoom: 1;}
  </style>
</head>

<body>
<ul>
    <li onclick="clicker(1)">one</li>
    <li onclick="clicker(2)">two</li>
    <li onclick="clicker(3)">three</li>
</ul>
<div class="web_index">
  <div id="t1">content one</div>
  <div id="t2">content two</div>
  <div id="t3">content three</div>
</div>
<script type="text/javascript">
    function clicker(tab){
      document.getElementById("t1").style.display = "none";
      document.getElementById("t2").style.display = "none";
      document.getElementById("t3").style.display = "none";

      document.getElementById("t" + tab).style.display = "block";
    }
    clicker(1);
</script>
</body>
</html>

工作中

代替查找元素出现的index ,我们可以给每个元素赋予唯一ID。 然后,函数支持参数,这就是javascript的目的。 传递该参数并使用.style.display元素设置样式。

我们不需要将标签定位为绝对位置,因为它不会挂起。 并且,您可以使用display: inline-block而不是float: left来设置边距。

.web_index div {width: 400px; height: 300px; background: #eee;}
ul li {width: 100px; height: 30px; line-height: 30px; list-style: none; display: inline-block; *display: inline; zoom: 1;}

您可以通过以下方式重写clicker()脚本:

function clicker(tab){
  document.getElementById("t1").style.display = "none";
  document.getElementById("t2").style.display = "none";
  document.getElementById("t3").style.display = "none";

  document.getElementById("t" + tab).style.display = "block";
}

因此,您可以将DIV标签的ID作为参数传递。 通过修改元素的style属性,可以隐藏或显示。

您可以使用相同的onclick函数在<li>调用此函数,但只需传递另一个额外的参数即可:

<ul>
    <li onclick="clicker(1)">one</li>
    <li onclick="clicker(2)">two</li>
    <li onclick="clicker(3)">three</li>
</ul>

在以下位置查看演示: http : //jsbin.com/welcome/22513

1 javascript中的tab keyascii不起作用

例如,我在HTML代码中有3个元素用于文本输入。 初次加载时,我将js设置为关注txt1 。 我的问题是,我怎么能操纵keyascii当我压片从TXT1到txt3? 事实上,我已经用jquery添加了一些js代码来做到这一点,但是没有用! 它始终集中在txt2上 。 这是我的 ...

2 Tab键的按键事件不起作用(原生JavaScript)

因此,我最近一直在学习JavaScript,但似乎无法弄清楚以下代码为什么不起作用。 我在“ enter”上使用了一个按键事件(按键代码13,以防万一有人好奇),它可以很好地工作。 但是我无法使按键代码9(选项卡)正常工作。 函数listItemTab本身似乎可以工作,但是它永远不会进 ...

3 选项卡未处于活动状态时,Javascript setInterval 无法正常工作

我有这个代码。 一切正常,当此选项卡在浏览器中处于活动状态时,但是当我更改选项卡并稍后返回选项卡时,它会出现问题。 更准确地说,它错误地显示了时间。 我也试过 setTimeout,但问题是一样的。 我的一个想法是:HTML5 Web Workers ... 但这里有另一个问题...浏览器 ...

4 jQuery选项卡不起作用

我正在学习jquery,正在尝试制作一个标签。 我不明白为什么这行不通 我在这里有我的HTML 这是我的jQuery 我是从观看的视频中编写此代码的,对于这个人来说,该代码非常有效,所以我不明白为什么它对我不起作用。 ...

6 标签页视图不起作用

我想创建一个带有选项卡式视图的简单构建菜单。 昨天晚上我更改了某项之后,它不再起作用。 选项卡之间的切换中断,所有选项卡的内容将显示在第一个选项卡上 片段: 样例代码 资源 我的测试网站 ...

7 ViewPagerFragment选项卡不起作用

我创建一个viewPager并正常工作,我的问题是选择一个页面,我只能拖动页面,但我想单击选项卡以选择页面。 我也添加了(编译'com.android.support:design:26.0.0-alpha1') 我的FragmentPagerAdapter代码 我的M ...

8 标签页布局不起作用

我对该库rey5137 / material遇到问题。 我尝试添加选项卡布局,但每次都会出错。 它没有显示任何LogCat错误,但是当我运行我的应用程序时,它停止运行。 我在布局设计器部分中也遇到此错误: ...

9 垂直制表符不起作用

我创建了一个垂直选项卡,但是它不起作用。 我找不到问题所在。 HTML: CSS: JQUERY: 问题是,当单击选项卡上的内容时,该选项卡的内容不显示,只是URL被更改。 这是演示 。 ...

10 点击标签无法正常工作

我有一个简单的网页,没有几个标签,每个标签都有一个段落(或&lt;div&gt; )。 通过单击这些选项卡,页面应显示相应的段落。 但是,无论我单击哪个选项卡,都会在另一个选项卡下显示所有段落。 例如,如果我单击“联系人”选项卡,它也会在“我是谁”,“法塔赫博客”下显示该段。 [ ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2021 STACKOOM.COM