同一导航条下两个页面切换

u014133213 2016-11-14 04:12:58

就是在同一个导航条里面两个页面可以互相切换，比如我点击课程列表出现的就是课程列表的内容，点击另一个，出现另一页面的内容，这个要如何实现，求大神指点
...全文
1208 11 打赏 收藏 转发到动态 举报
写回复
用AI写文章
11 条回复
切换为时间正序
请发表友善的回复…
发表回复
葉幺 2018-08-09
  • 打赏
  • 举报
 回复
在课程列表跟课程回答下面加两个div，一个现实一个隐藏，点击的时候切换现实跟隐藏的就行了 代码可以参考五楼跟6楼
小象二号 2018-07-25
  • 打赏
  • 举报
 回复
有没有答复了？我也想知道这个，我知道横向导航栏代码，但是我想要竖着的，
黑色的寂寞 2016-12-07
  • 打赏
  • 举报
 回复
五楼和六楼的代码你可以试试，不行我贴出来，因为我也是之前做过，不会问的别人
贰拾肆樵 2016-12-06
  • 打赏
  • 举报
 回复
两个子页面的div用绝对定位重叠在一起，其中一个设置display:none; 然后给了两个导航按钮写js事件，点击左边那个，对应的div的display设为block，另一个设为none； 反之亦然
看着是个昵称 2016-12-06
  • 打赏
  • 举报
 回复
源码 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>H5+jquery点击切换</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
	    <script type="text/javascript" src="js/jquery-2.1.4.min.js" ></script>
	    <script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js" ></script>
		<script type="text/javascript" src="js/tab.js"></script>
	</head>

<body>
	<div data-role="page">
		<div data-role = "content-floud">			
			<div style="font-family: '微软雅黑';">
				<ul id="hear">
					<li class="action" style="border-bottom: 2px solid red;height: 43px;"><a href="javascript:void(0)">未使用<span style="color: red;">(0)</span></a></li>
					<li><a href="javascript:void(0)" >已使用<span style="color: red;">(8)</span></a></li>
					<li><a href="javascript:void(0)" >已过期<span style="color: red;">(2)</span></a></li>
				</ul>
				<ul id="contentop">
					<li class="action">
                       weishiyong
					</li>
					<li>
                      yishiyong
					</li>
					<li>
						yiguoqi
					</li>
				</ul>
			</div>			
		</div>					
	</div>
</body>
</html>
样式 

*{text-decoration: none;margin: 0;padding: 0;list-style: none;}
				#hear{width: 100%;height: 44px;line-height: 45px;border-bottom: 1px solid #cccccc;}
				#hear a{font-weight: normal;color: black;}
				#hear li{text-align: center;float: left;height: 45px;}
				#hear li:nth-of-type(1){width: 33%;float: left;}
				#hear li:nth-of-type(2){width: 33%;float: left;}
				#hear li:nth-of-type(3){width: 34%;float: right;}
				#contentop li{ width: 90%; display: none;text-align: center;margin: 0 auto;margin-top: 12px;}
				#contentop .action{ display: block;}
				#contentop .usl{width: 100%;height: 110px;background:wheat;border: 1px solid #cccccc;margin-bottom: 10px;text-shadow: none;}			
				#contentop .alo{width: 100%;height: 110px;background: white;border: 1px solid #cccccc;margin-bottom: 10px;text-shadow: none;}
				#contentop span{font-size: 1.3em;color: #47B0D7;}
				#contentop .sty1{margin-top: 18px;}
				#contentop .sty2{margin-top: 13px;}
				#contentop .sty3{margin-top: 13px;}
				#contentop .sty4{text-align: right;font-size: 0.8em;margin-top: -20px;}
				#contentop .Buy{font-size: 0.8em;margin-top: 2px;}
				#contentop .Buy div:nth-of-type(1){text-align: left;padding-left: 15px;}
				#contentop .Buy div:nth-of-type(2){float: right;}
				#contentop .cllio {background:url(../img/20010.png)repeat-x;width: 93%;height:8px;margin: 0 auto;margin-top: 5px;}
jQuery引用 

		$(function(){
					$("#hear li").click(function(){
						$(this).css({
							borderBottom: "2px solid red",
							height:"43px"
						}).siblings().css({
							borderBottom: "none",
							height:"45px"
						});
					});					
						
					$("#hear li").click(function(){
						$(this).addClass("action").siblings().removeClass("action");
						var index = $(this).index();
						$("#contentop li").eq(index).css("display","block").siblings().css("display","none");
					});
				});
然后自己下载一个jQuery文件
forwardNow 2016-12-02
  • 打赏
  • 举报
 回复
演示：点击我进行预览 补充：看不懂，可以联系我，我再修改一下。 

<style>
        body { font : 14px/1.5 "Microsoft Yahei"; }
        ul { margin : 0; }
        a { color : #428bca; text-decoration  : none; background-color : transparent; }
        .nav-tabs { border-bottom : 1px solid #dddddd; padding-left  : 0; margin-bottom : 0; list-style : none; }
        .nav-tabs:before { display : table; content : " "; }
        .nav-tabs:after { display : table; content : " "; clear : both; }
        .nav-tabs > li { position : relative; display : block; float : left; margin-bottom : -1px; }
        .nav-tabs > li > a { position : relative; display : block; line-height   : 1.42857143;
            border: 1px solid transparent; border-radius : 4px 4px 0 0; padding : 10px 15px; margin-right  : 2px; }
        .nav-tabs > li.active > a,
        .nav-tabs > li.active > a:hover,
        .nav-tabs > li.active > a:focus { color : #555555; cursor : default; background-color : #ffffff;
            border: 1px solid #dddddd; border-bottom-color : transparent; }
        .tab-content { border : solid 1px #dddddd; border-top : none 0; min-height : 300px; padding : 20px; }
        .tab-content > .tab-pane { display : none; visibility : hidden; }
        .tab-content > .active { display : block; visibility : visible; }
    </style>
    <script>
        $( document ).ready( function ( $ ) {
            // 点击页签
            $( ".nav-tabs" ).find( "li" ).on( "click", function () {
                var $this,
                    $targetPanel
                ;
                $this = $( this );
                $targetPanel = $( $this.find( "a" ).attr( "href" ) );

                // 1. 切换页签active
                $this.addClass( "active" )
                     .siblings().removeClass( "active" );

                // 2. 切换面板active
                $targetPanel.addClass( "active" )
                            .siblings().removeClass( "active" );
            } );
        } );
    </script>
<div class="container">

    <!-- Nav tabs：active状态的会高亮显示 -->
    <ul class="nav-tabs">
        <li class="active"><a href="#course-list">课程列表</a></li>
        <li><a href="#course-answer">课程回答</a></li>
    </ul>

    <!-- Tab panes：active状态的会显示，其他的会隐藏 -->
    <div class="tab-content">
        <div class="tab-pane active" id="course-list">
            <ul>
                <li><a href="#">web学习</a></li>
                <li><a href="#">HTML入门</a></li>
            </ul>
        </div>
        <div class="tab-pane" id="course-answer">
            <ul>
                <li><a href="#">web学习解答</a></li>
                <li><a href="#">HTML入门解答</a></li>
            </ul>
        </div>
    </div>

</div>
当作看不见 2016-12-01
  • 打赏
  • 举报
 回复
http://blog.csdn.net/qq_29594393/article/details/52891881 其实就是选项卡
Y丶Jonh 2016-12-01
  • 打赏
  • 举报
 回复
很简单的，思路告诉你，导航条两个模块，下面内容也是两个样式大小位置一样的模块，其中一个隐藏就可以做到样式大小位置的，分别对应导航条两个模块的内容，点击课程列表，你下面就显示课程列表对应的模块，隐藏课程回答模块，点击课程回答，就隐藏课程列表的模块，显示课程回答模块
大刘鸭 2016-11-14
  • 打赏
  • 举报
 回复
不知道我上传的图片显示没，没显示了你在联系我
大刘鸭 2016-11-14
  • 打赏
  • 举报
 回复
希望可以帮到你，自己写的原生，比较好理解的
vue同一路由控制不同页面跳转_vue使用vuex实现首页导航切换不同路由的方法
vue实现首页导航切换不同路由的方式(二)【使用vuex实现的】，具体代码如下所示：了解海华教育(视频)首页学校简介专业介绍校园风采新闻资讯招生信息就业中心在线报名联系我们css:/* 导航栏 */.indexNavOut{background...
当使用同一echarts组件时切换导航栏数据发生变化但图仍然存在
在tabs导航栏进行切换时，随着条件的不同，echarts渲染的数据也有所不同，而此时会出现echats图例中只存在两个元素，而在图形柱状图内却出现了三条柱状图，这明显是对应不上的。如下图所示：1.此时图例上只存在两个...
HTML页嵌套导航栏且实现页面跳转
将整个页面划分为一个大的div，然后分成两个小的div，左边的div嵌套导航页面，右边的div展示需要展示的东西 下图为嵌入导航页的代码，src为嵌套页面路径，配置一下宽高，然后左边悬浮 <div class="lef
页面tab栏切换，点击详情，跳转同一个页面，页面标题进行相应的切换，点击详情，跳转到对应的点击数据信息
页面tab栏切换，点击详情，跳转同一个页面，页面标题进行相应的切换，点击详情，跳转到对应的点击数据信息
vue切换路由页面数据缓存_Vue-Router实现前端页面缓存
一、使用情景在使用Vue开发单页面应用时，我们通常会使用Vue-Router进行页面导航，Vue-Router在进行路由切换的时候，页面是会重新加载，对应的生命周期函数也会再次执行一遍，但是在有些业务场景下，比如：在有分页...
CSS

61,115

社区成员

60,728

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章