选项卡登录

最新推荐文章于 2022-07-18 21:26:16 发布

郭晓湉

最新推荐文章于 2022-07-18 21:26:16 发布

阅读量2.4k

点赞数 2

分类专栏： jQuery HTML5 Html

本文链接：https://blog.csdn.net/xtqueen/article/details/38016273

版权

这篇博客展示了如何创建一个多角色选项卡登录的界面，其中包括不同角色的选中状态，通过绿色边框进行区分。虽然截图颜色显示不准确，但在作者个人博客的demo中可以查看真实效果。

摘要由CSDN通过智能技术生成

多角色选项卡登录效果图如下：

其实是绿色的边框选中的角色也会标绿但是截图出来就成这效果了可以去我个人博客看demo 地址

html代码如下：

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>角色选项卡</title>

<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />

<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function(){	
	$('.tabPanel ul li').click(function(){
		$(this).addClass('hit').siblings().removeClass('hit');
		$('.panes>div:eq('+$(this).index()+')').show().siblings().hide();	
	})
})
</script>

</head>

<body>

<div >

    <div class="tabPanel">
		<ul>
			<li class="hit">企业方</li>
			<li>供应方</li>
			<li>京体网</li>
		<

最低0.47元/天解锁文章

郭晓湉

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
选项卡登录

多角色选项卡登录效果图如下：其实是绿色的边框选中的角色也会标绿但是截图出来就成这效果了可以去我个人博客看demo 地址html代码如下：角色选项卡$(function(){ $('.tabPanel ul li').click(function(){ $(this).addClass('hit').siblings().removeClass('hit');
复制链接

扫一扫

专栏目录