CSS三角形及其点击切换

先看一下效果图：

点击后-->

<style>
.triangle {width: 0;height: 0;border: 5px solid transparent;display: inline-block;
}
.tri-b {border-bottom: 0;border-top: 8px solid #000;margin-top: 2px;
}
.tri-r {border-right: 0;border-left: 8px solid #000;
}
</style>
<body><span class="triangle tri-r" onclick="changeTriangle()" id="triangle"></span><span>测试测试</span><script>function changeTriangle(e){var tri = document.getElementById("triangle"),triangle = tri.className.split(' ')[0],triCls = tri.className.split(' ')[1];console.log(tri.className)if(triCls==="tri-b"){triCls="tri-r";}else{triCls="tri-b";}tri.className = triangle+' '+triCls;}</script>
</body>

CSS三角形及其点击切换相关推荐

使用css实现点击切换效果
使用css制作简单的点击切换效果,参考了以下教程:css实现的轮播和点击切换(无js版) 首先先制作一个容器,用来容纳所显示的内容: HTML代码: <html></html> ...
vue动态点击切换css样式且子元素动态显示和隐藏
vue动态点击切换css样式并子元素动态显示和隐藏 <template><div v-for="i in 5" class="el-personal&q ...
vue点击切换css样式
vue动态点击切换css样式 <template><div v-for="i in 5" class="el-personal" :class ...
纯css就能实现可点击切换的轮播图，feel起来很丝滑
前言轮播图经常会在项目里用到,但是实际上用到的轮播图都是比较简单的,没有复杂的特效,这个时候如果去引入swiper那些库的话,未免就有点杀鸡焉用牛刀了. 所以不如自己手写一个,而今天我要分享的一种写 ...
前端开发学习--登录和注册页面设计（html和css，可完成两个页面点击切换）
今天学习了登录和注册页面的设计,主要是HTML和CSS部分,注册和切换采用了Js代码进行,后面将通过js进行填写内容的验证,进而可通过JSP跳转到Servlet进行DAO数据的校验,这属于后端部分了. ...
点击切换属性html,jQuery_$方法、属性、点击切换
jQuery_$方法 1.$.each():遍历数组或对象中的数据 2.$.trim():去除字符串两边的空格 3.$.type(obj):得到数据的类型 4.$.isArray(obj):判断是否为 ...
超好用的简单的jquery tab选项卡切换代码（点击切换和导航栏滑过）
实例1(点击切换): 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 ...
jquery中点击切换的实现
项目中经常会遇到一种情况,就是点击切换,比如点击按钮,div样式为1,再点击一下按钮,div样式为2,再点击一下按钮,div样式为1.需要自定义jQuery方法toggle. // toggle方法$ ...
html5点击切换选项卡,简单纯js实现点击切换TAB标签实例
一个不需要jQuery实现的tab选项卡切换效果,代码简洁易用. 默认是鼠标悬停显示tab效果,可将其中的onmouseover 修改为 onclick 点击效果使用方法: 1.将附件中的index ...

CSS三角形及其点击切换

CSS三角形及其点击切换相关推荐

最新文章

热门文章