dedecms-选项卡制作

最新推荐文章于 2020-10-29 20:16:00 发布
最新推荐文章于 2020-10-29 20:16:00 发布
阅读量1.4k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Marshmallown/article/details/80646835
版权

制作选项卡。

1.编写栏目


2.获取栏目。显示到页面上；

<div class="slider_area">
		<div class="container-fluid">
		<div class="row">
		 <!-- Tab panes -->
		  <div class="tab-content">
				<!--软院特色-->
				<div class="tab-pane active" id="a">
					<div class="col-md-7 col-sm-7 col-xs-12 pd0">
						<div class="slide_thumb">
							<img src="{dede:global.cfg_templets_skin/}/images/ruanyuantese.jpg" alt="" >
						</div>
					</div>
					<div class="col-md-5 col-sm-5 col-xs-12 pd0">
						<div class="slide_text">
							<h2 class="slide_title">走进软院</h2>
							  <div class="slide_readmore">
                            	     <img src="{dede:global.cfg_templets_skin/}/images/zjry.jpg">
                                 <ul style="font-color:#000">                             
                                 {dede:channel typeid="44"}
                                    <li><a href='[field:typeurl/]'>[field:typename/]</a></li>
                                 {/dede:channel}
                                 </ul>                               
                            </div>
						</div>
                        <div class="slide_text">
							<h2 class="slide_title">软院特色</h2>
							  <div class="slide_readmore">
                            	     <img src="{dede:global.cfg_templets_skin/}/images/ryts.jpg">
                                 <ul style="font-color:#000">                             
                                 {dede:channel typeid="49"}
                                    <li><a href='[field:typeurl/]'>[field:typename/]</a></li>
                                 {/dede:channel} 
                                 </ul>                               
                            </div>
						</div>

					</div>
				</div>		
				<!--软院特色结束-->
				<!--学习生活-->
				<div class="tab-pane" id="b">
					<div class="col-md-7 col-sm-7 col-xs-12 pd0">
						<div class="slide_thumb">
							<img src="{dede:global.cfg_templets_skin/}/images/xuexishenghuo.jpg" alt="">
						</div>
					</div>
					<div class="col-md-5 col-sm-5 col-xs-12 pd0">
							<div class="slide_text">
							<h2 class="slide_title">学在软院</h2>
							  <div class="slide_readmore">
                            	 <img src="{dede:global.cfg_templets_skin/}/images/xzry.jpg">
                                 <ul style="font-color:#000">                             
                                 {dede:channel typeid="54"}
                                    <li><a href='[field:typeurl/]'>[field:typename/]</a></li>
                                 {/dede:channel}
                                 </ul>                               
                            </div>
						</div>
						<div class="slide_text">
							<h2 class="slide_title">软院生活</h2>
							  <div class="slide_readmore">
                            	 <img src="{dede:global.cfg_templets_skin/}/images/rysh.jpg">
                                 <ul style="font-color:#000">                             
                                 {dede:channel typeid="55"}
                                    <li><a href='[field:typeurl/]'>[field:typename/]</a></li>
                                 {/dede:channel}
                                 </ul>                               
                            </div>
						</div>
					</div>
				</div>		
				<!--学习生活结束-->				
				<!--能力素质-->
				<div class="tab-pane" id="c">
					<div class="col-md-7 col-sm-7 col-xs-12 pd0">
						<div class="slide_thumb">
							<img src="{dede:global.cfg_templets_skin/}/images/zhiyesuzhi.jpg" alt="">
						</div>
					</div>
					<div class="col-md-5 col-sm-5 col-xs-12 pd0">
						<div class="slide_text">
							<h2 class="slide_title">素质训练</h2>
							  <div class="slide_readmore">
                            	<img src="{dede:global.cfg_templets_skin/}/images/suzhixuelian.jpg">
                                 <ul style="font-color:#000">                             
                                 {dede:channel typeid="61"}
                                    <li><a href='[field:typeurl/]'>[field:typename/]</a></li>
                                 {/dede:channel}
                                 </ul>                               
                            </div>
						</div>
						<div class="slide_text">
							<h2 class="slide_title">能力提升</h2>
							  <div class="slide_readmore">
                            	 <img src="{dede:global.cfg_templets_skin/}/images/nenglitisheng.jpg">
                                 <ul style="font-color:#000">                             
                                 {dede:channel typeid="62"}
                                    <li><a href='[field:typeurl/]'>[field:typename/]</a></li>
                                 {/dede:channel}
                                 </ul>                               
                            </div>
						</div>
					</div>
				</div>
			<!-- 学习生活结束-->
				<!--企业就业-->
				<div class="tab-pane" id="d">
					<div class="col-md-7 col-sm-7 col-xs-12 pd0">
						<div class="slide_thumb">
							<img src="{dede:global.cfg_templets_skin/}/images/qiyejiuye.jpg" alt="">
						</div>
					</div>
					<div class="col-md-5 col-sm-5 col-xs-12 pd0">
						<div class="slide_text">
							<h2 class="slide_title">企业伙伴</h2>
							  <div class="slide_readmore">
                            	 <img src="{dede:global.cfg_templets_skin/}/images/qiyehuoban1.jpg">
                                 <ul style="font-color:#000">                             
                                 {dede:channel typeid="67"}
                                    <li><a href='[field:typeurl/]'>[field:typename/]</a></li>
                                 {/dede:channel}
                                 </ul>                               
                            </div>
						</div>
						<div class="slide_text">
							<h2 class="slide_title">就业服务</h2>
							  <div class="slide_readmore">
                            	<img src="{dede:global.cfg_templets_skin/}/images/jiuyefuwu1.jpg">
                                 <ul style="font-color:#000">                             
                                 {dede:channel typeid="68"}
                                    <li><a href='[field:typeurl/]'>[field:typename/]</a></li>
                                 {/dede:channel}
                                 </ul>                               
                            </div>
						</div>
					</div>
				</div>
			<!--企业就业结束-->
			</div>
		</div>
		</div>
	</div>
2. 
	<!-- 点击更改大栏目 -->
	<div class="slide_nav_menu">
			<div class="container-fluid">
				<div class="row">			
					<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12 pd0">
						<div class="slide_tab">
							<ul class="nav_style">
								<li class="active"><a href="http://127.0.0.1/ware/uploads/index.html/#a" data-toggle="tab">软院-特色<br/>About us</a></li>
								<li><a href="http://127.0.0.1/ware/uploads/index.html/#b" data-toggle="tab">学习-生活<br/>Studying and Living</a></li>
								<li class=""><a href="http://127.0.0.1/ware/uploads/index.html/#c" data-toggle="tab">能力-素质<br/>Competence and Quality</a></li>
								<li class=""><a href="http://127.0.0.1/ware/uploads/index.html/#d" data-toggle="tab">企业-就业<br/>Enterprise and Employment</a></li>
							
							</ul>
						</div>
					</div>
				</div>	
			</div>
		</div>
	<!-- 点击更改大栏目结束-->

3.如下为效果图：
Marshmallown
关注
js选项卡制作
qq_2549265061的博客
08-01 820
选项卡 选项卡在很多项目中都有用到，下面是我用原生js做的选项卡，如有不足，望指正。 html结构与样式 头部导航采用flex布局，等宽分布li元素。设置颜色是为了区分界限。 内容部分宽高占满剩余的空间，每个内容块宽高100%。 通过display属性让选中项内容显示，其他项内容隐藏。 css中的on样式：选中的那一项，增加的样式（头部li元素）。 css中的show样式：选中的那一项的内容，增加...
织梦checkbox多条件筛选，前段筛选多字段不显示筛选条件的问题
sy_3714的博客
08-26 324
织梦checkbox多条件筛选，前段筛选多字段不显示筛选条件的问题 插件只是适用于radio选项卡或者option下拉框，筛选条件只能为一个，下面这个方法，可以将自定义字段设为checkbox多选框，后台发布文章选择多个条件时，筛选也能筛选出来，下面上教程 首先将下载的插件部署到你的网站系统里，并且已经能够实现筛选功能，然后修改文件，include/arc.listview.class.php文件 第176行左右； 将 foreach($_GET as $key => $value) { $filte
JQuery 网页选项卡制作
weixin_33905756的博客
07-27 215
网页选项卡可以较好的利用有限的页面来展示更多的元素，而使用JQuery来制作网页选项卡也是一件非常简单的事情。今天就来分享一个网页选项卡的制作小技巧。 引入所需库 选项卡原理 业务核心 完整小例子 引入所需库 这个知识点很基础，但是为了照顾fresh man ,我还是写一下吧。 细节部分可参照JQuery 如何...
选项卡制作
yhzh_311200的专栏
09-15 349
<% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> "> My JSP 'index.jsp' startin
jquery标签筛选联动选中.rar
07-05
本示例“jquery标签筛选联动选中”是关于使用jQuery实现一种常见UI交互效果，即当用户在标签（通常表现为选项卡）中选择一个条目时，对应的筛选内容会自动高亮或显示。这种功能常用于数据过滤、产品展示等多种场景，...
linux笔记
roarrabbit的博客
10-29 3052
导 2020/3/10 Linux操作系统是UNIX操作系统的一种克隆系统，它诞生于1991 年的10 月5 日(这是第一次正式向外公布的时间)。以后借助于Internet网络，并通过全世界各地计算机爱好者的共同努力，已成为今天世界上使用最多的一种UNIX 类操作系统，并且使用人数还在迅猛增长。 Linux是一套免费使用和自由传播的类Unix操作系统，是一个基于POSIX和UNIX的多用户、多任...
技术淘宝
热门推荐
dicha7140的博客
06-23 2万+
???? ???? ???? ????精度前端学习 ——前端开发100天（置顶） http://alloyteam.github.io/CodeGuide/https://github.com/AlloyTeam/CodeGuide cmd控制台的小技巧：可以直接将文件夹/文件丢进去，这样就会打印出该路径了。 舒服的字体家族样式： font: 300 16px/1.8 ...
入行Web前端开发工程师，从0到1，成长攻略！
web前端入门基础进阶教程-htmlcssjs
05-04 481
Web开发人员负责许多任务，从收集需求到设计网站，处理网站的后端部分，并使其成功地为用户服务。 每年，行业中都会涌现出新技术和工具，以提高开发人员的工作效率，并为用户提供更好的网站。对于他们来说，保持在Web开发游戏之上的挑战变得越来越大。 今天，我们将讨论要在2020年成为Web开发人员的完整地图。这将是针对所有开发人员（前端，后端和全栈）的实用指南。 1、首先确定你的目标或道路 我们将讨论很...
选项卡切换效果之网页设计
03-30
选项卡切换效果，网页设计！网页设计！网页设计！网页设计！网页设计！网页设计！网页设计！网页设计！网页设计！网页设计！网页设计！网页设计！网页设计！网页设计！网页设计！网页设计！网页设计！网页设计！网页设计！
三种简洁的Tab导航（网页选项卡）
12-04
三种简洁的Tab导航（网页选项卡） Tab导航 网页选项卡 滑动门 选项卡切换
选项卡的制作
qq_28851143的博客
02-25 450
window.onload=function() { var a=document.getElementById("red"); var b=document.getElementById("green"); var c=document.getElementById("blue"); var d=document.getElementById("but1"); var e=doc
简单的选项卡制作（原生JS）
angnai5032的博客
01-12 116
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> div{ width: 100px; height: 100px; ...
js制作选项卡
shmily__的博客
01-05 416
制作选项卡问题： 1.背景色默认透明（有时候会误以为是白色），只有设置了背景色，才能遮盖下方选项内容的边框。 2.继续了解匿名函数自调用。 html> head> meta charset="utf-8"> title>js原生选项卡切换title> style type="text/css"> body{ backgroun
dedecms-v5.7-utf8-sp2
最新发布
07-30
dedecms-v5.7-utf8-sp2拥有许多有用的功能，如内容管理、会员管理、模块扩展等。通过dedecms，用户可以方便地创建网站、发布和管理内容，包括文章、图片、音频、视频等。其中，内容管理模块提供了灵活的分类和标签...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值