水平导航样式

css:

1  <style>
2      div{margin:0;padding:0;width:1184px;height:200px;display:none;}
3     .tab{margin:0;padding:0;list-style:none;width:400px;overflow:hidden;}
4     .tab li{float:left;width:110px;height:36px;background:#ccc;color:#fff; text-align:center;line-height:36px;cursor:pointer; }
5     .on{display:block;}
6     .tab li.cur{background:#337ab7;}
7 </style>

html:

1 <ul class="tab">
2        <li>最新</li>
3        <li class="cur">热门</li>
4        <li>新闻</li>
5  </ul>
6  <div>11</div>
7  <div class="on">22</div>
8  <div>33</div>

js:

1 <script>
2   $(document).ready(function(){
3         $(".tab li").click(function(){
4         $(".tab li").eq($(this).index()).addClass("cur").siblings().removeClass(‘cur‘);
5 $("div").hide().eq($(this).index()).show();
6         });
7     });
8 </script>

效果:

bootstrap另一个版本:

html:

<ul id="myTab" class="nav nav-tabs">
    <li class="active">
        <a href="#home" data-toggle="tab">
            菜鸟教程
        </a>
    </li>
    <li><a href="#ios" data-toggle="tab">iOS</a></li>
    <li class="dropdown">
        <a href="#" id="myTabDrop1" class="dropdown-toggle"
           data-toggle="dropdown">Java
            <b class="caret"></b>
        </a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
            <li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>
            <li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>
        </ul>
    </li>
</ul>
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="home">
        <p>菜鸟教程是一个提供最新的web技术站点,本站免费提供了建站相关的技术文档,帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术,更是梦想。</p>
    </div>
    <div class="tab-pane fade" id="ios">
        <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple
            TV。iOS 派生自 OS X,它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上,iOS 是苹果的移动版本。</p>
    </div>
    <div class="tab-pane fade" id="jmeter">
        <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序,用于负载和性能测试。</p>
    </div>
    <div class="tab-pane fade" id="ejb">
        <p>Enterprise Java Beans(EJB)是一个创建高度可扩展性和强大企业级应用程序的开发架构,部署在兼容应用程序服务器(比如 JBOSS、Web Logic 等)的 J2EE 上。
        </p>
    </div>
</div>

js:

1             $( function(){
2             $("#mytab a").click(function (e) {
3                 e.preventDefault();
4                 $(this).tab("show");
5             })
6         }
7         )

效果:

详细介绍:https://www.runoob.com/bootstrap/bootstrap-tab-plugin.html

时间: 2024-11-08 19:55:45

水平导航样式的相关文章

纯css实现的三级水平导航菜单

vscode练习使用开发纯css的三级水平导航菜单.先上图: 1.html5布局 1 <html> 2 3 <head> 4 <meta charset="UTF-8"> 5 <title>水平导航菜单</title> 6 <link rel="stylesheet" href="reset.css"> 7 <link rel="stylesheet"

简单的水平导航条

要创建一个简单的水平导航条,首先需要借助<ol><li>标签创建有序列表.主题内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&qu

Bootstrap系列 -- 37. 基础导航样式

Bootstrap框架中制作导航条主要通过“.nav”样式.默认的“.nav”样式不提供默认的导航样式,必须附加另外一个样式才会有效,比如“nav-tabs”.“nav-pills”之类.比如右侧代码编辑器中就有一个tab导航条的例子,他的实现方法就是为ul标签加入.nav和nav-tabs两个类样式 <ul class="nav nav-tabs"> <li><a href="##">Home</a></li&

制作水平导航栏

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <title>制作水平导航栏</title> 9 <style type="text/css&qu

水平导航栏制作

在网页中水平导航栏是每一张网页都有的. 现在做一个简单的导航栏: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <meta content="text/html" charset="utf-8">

自产自用标准水平导航

<!DOCTYPE html> <html lang = "en"> <head>     <meta charset = "utf-8" />     <title>标准水平导航</title>     <style>         .nav, .item {             margin: 0; padding: 0;             text-align: c

水平导航-js二级菜单方法一

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水平导航-二级菜单</title> <style type="text/css"> *{ padding:0px; margin: 0px; } .navBar{ height: 30px; background-color:

水平导航栏

有两种方式:行内列表或者浮动列表:但是如果你想实现,相同宽度的连接,就只能够使用浮动列表: html代码: <!DOCTYPE html> <html> <head> <style> ul { list-style-type:none; margin:0; padding:0; overflow:hidden; } li { float:left; } a:link,a:visited { display:block; width:120px; font-w

不可错过的手机APP常见8种界面导航样式

前言:相信每一个移动开发工程师都会遇到,当一个项目开发启动时,需要考虑搭建怎么的框架.一个好的框架,也会决定着一个APP的前途与命运.框架的风格,现在常见的有八种:标签导航.舵式导航.抽屉导航.宫格导航.组合导航.列表导航.tab导航.轮播导航.最近在网上收集到一些资料,正好和大家分享一下,感谢原作者的贡献. 当我们确定了移动APP的设计需求和APP产品设计流程之后,开始着手设计APP界面UI或是APP原型图啦.这个时候我们都要面临的第一个问题就是如何将信息以最优的方式组合起来? 也许我们对比和