Javascript 如何将导航更改为选项卡菜单_Javascript_Html

Javascript 如何将导航更改为选项卡菜单

javascript html

Javascript 如何将导航更改为选项卡菜单,javascript,html,Javascript,Html,我想更改我的导航栏，如选项卡菜单。示例如下范例但是我想要纯javascript 我的代码在这里： #导航栏{ 宽度：660px； } #导航杆支架{ 高度：64px；边框底部：1px实心#000000；宽度：630px；左侧填充：0px； } #导航杆#支架ul{ 列表样式：无；保证金：0；填充：0； } #导航杆#支架ul li a{ 文字装饰：无；浮动：左；右边距：5px；字体系列：“Arial黑色”，小工具，无衬线；颜色：#000000；边框：1px实心#00000

我想更改我的导航栏，如选项卡菜单。示例如下

范例

但是我想要纯javascript

我的代码在这里：

#导航栏{
宽度：660px；
}
#导航杆支架{
高度：64px；
边框底部：1px实心#000000；
宽度：630px；
左侧填充：0px；
}
#导航杆#支架ul{
列表样式：无；
保证金：0；
填充：0；
}
#导航杆#支架ul li a{
文字装饰：无；
浮动：左；
右边距：5px；
字体系列：“Arial黑色”，小工具，无衬线；
颜色：#000000；
边框：1px实心#000000；
边框底部：无；
填充：23px；
/*宽度：86px*/
文本对齐：居中；
显示：块；
背景：#69F；
-左上角moz边界半径：35%；
-moz边界半径右上角：15px；
}
#导航杆#支架ul li a：悬停{
背景:#F90；
颜色：#FFF；
文本阴影：1px 1px 1px#000；
}
#持有人ul li a#onlink{
背景：#ffffff；
颜色：#000000；
边框底部：1px实心#ffffff；
}
#持有人ul li a#onlink：悬停{
背景：#ffffff；
颜色：#69f；
文本阴影：1px 1px 1px#000；
}






海
你好

制作一个选项卡所需的只是根据需要显示和隐藏元素

HTML:

我已为此添加了密码pin

根据您的要求更改html和样式

您说您想用纯javascript实现这一点，但我想向您展示更好的东西：根本没有javascript

使用CSS伪元素

：target

（或

：：target

）可以获得相同的行为：

这适用于大多数浏览器（甚至在Internet Explorer 9或更新版本中）
下面是一个JS Fiddle示例，介绍如何将其用于“制表符”效果：

#选项卡
{
位置：相对位置；
}
.标签
{
背景色：白色；
位置：绝对位置；
宽度：100%；
最小高度：50px；
边框：1px纯灰；
}
.选项卡：目标
{
z指数：2；
}







嗨，这是第一页
嗨，这是表2
嗨，这是表3
嗨，这是4号标签

您是否尝试过使用？在关于的教程中，如果我单击选项卡，该选项卡的背景颜色将发生变化，则可以学习如何在angularJS中隐藏/显示特定选项卡（当然使用JS）。。。如何更改背景颜色，就像在js-like-document.getElementById（“li-id”）.style.backgroundcolor=“red”中显示一样；document.getElementById（“LIID”）.style.backgroundcolor=“绿色”；

<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            .nav{
                height: 40px  ;
                width: 500px;
                background: #A9A9A9;
            }
            .nav ul{
                margin: 0%;
                padding: 0%;
            }
            .nav ul li{
                list-style: none;
            }
            .nav ul li a{
                text-decoration: none;
                float: left;
                display: block;
                padding: 10px 20px ;
                color: #000000;
            }
        </style>
    </head>

    <body>
        <div class ="nav">
            <ul>
                <li><a href="#" onclick='hideandshow({"hideid":"2cont","showid":"1cont"})'>Find a ride</a>
                </li>
                <li ><a href="#" onclick='hideandshow({"hideid":"1cont","showid":"2cont"})' >
                Offer to ride</a></li>
            </ul>
        </div>
        <div class ="nav">
            <ul>
                <li id="1cont"><a href="#" >Find a ride Content </a></li>
                <li id="2cont" style="display:none"><a href="#">Offer to ride Content</a> </li>
            </ul>
        </div>
    </body>
</html>

function hideandshow(obj){
  document.getElementById(obj.showid).style.display="block";
  document.getElementById(obj.hideid).style.display="none";
}