解决pc端选中效果

<style>

*{ margin:0; padding:0; list-style:none;}

body{ font:normal 14px/24px ‘MicroSoft YaHei‘;}

.cotrs{ width:960px; height:32px; line-height:32px; background:#999; margin:0 auto;}

.cotrs a{ height:32px; line-height:32px; color:#fff; text-decoration:none; padding:0px 10px; display:block; float:left;}

.cotrs a:hover{ text-decoration:none; background:#000;}

.cotrs a.thisclass{text-decoration:none; background:#000;}

</style>

<body>

<div class="cotrs">

<a href=‘javascript:‘ class="thisclass">菜单一</a>

<a href=‘javascript:‘>菜单二</a>

<a href=‘javascript:‘>菜单三</a>

<a href=‘javascript:‘>菜单四</a>

<a href=‘javascript:‘>菜单五</a>

</div>

</body>

<script>

 $(function(){
        var cotrs = $(".cotrs a");
        cotrs.click(function(){
            $(this).addClass("thisclass").siblings().removeClass("thisclass");
        });
    });

</script>

时间: 2024-10-07 23:39:57

解决pc端选中效果的相关文章

PC端体验效果最佳epub阅读器——iRead爱读书

官网:http://www.ireadhome.com/

PC端、移动端的页面适配及兼容处理

一.关于移动端兼容性 目前针对跨终端的方案,主要分为两大阵营:一套资源Vs两套资源. 第一种是通过响应式或页面终端判断去实现一套资源适配所有终端: 第二种是通过终端判断分别调取两套资源以适配所有终端. 这两种思路我们并不能斩钉截铁的说哪一个更优选,正所谓”合适的才是最好的”. 思路一:通过响应式或页面终端判断去实现一套资源适配所有终端 优势:只需维护一套资源,维护成本较低. 劣势:需加载适配各个终端的各个资源,在不同终端通过响应式布局实现不同展现,部分交互效果需要在页面中做终端判断,代价较大,若

CSS3及JS简单实现选项卡效果(适配手机端和pc端)

想要适配手机端和pc端,有几种简单的方法,本人使用的是百分比分配的方法. *{ padding: 0; margin: 0; } body,html{ width: 100%; height: 100%; overflow: hidden; } #bottom_box{ width: 100%; height: 50px; background-color: #eee; display: flex; //这是flex布局,父元素设置为flex,子元素设置几等份就是分成几等份 position:

Html5实现移动端、PC端 刮刮卡效果

刮刮卡需求: 每一位用户有三次刮刮卡的机会 本次刮刮卡的结果会覆盖上次的结果 刮刮卡的中奖几率呈现为递增的曲线(保证三次中必须有一次中奖) 刮出的结果包含按钮既(领取奖品 or 再来一次 ) 分享活动奖品升级(这里主要是微信分享的回调了) 我们自己的需求,今天就说怎么制作刮刮卡,有这样需求的可以找我要源码 第一.body创建Canvas <div class="info" id="prize"> <span id="prompt"

jquery简单的图片切换效果,支持pc端、移动端的banner图片切换开发

详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的banner图片切换效果. 写法很简单,网页初学者们或者wenbapp初学者们可以拿去学习学习,也可以在这基础上加上手机的图片滑动切换效果.废话不多说,下面说说这个简单的图片切换的效果吧! 首先以下是图片切换的效果图:   图片切换效果html内容: <div class="tyna2"&

每日分享!~ 如何解决获取卷曲高度的问题,document.body.scrollTop为什么在pc端拿不到值

document.scrollingElement.scrollTop 时间挺快的- 又是四月的最后一天了!好了进入今天的正题了.你在做项目的时候,经常会不会搞混document.documentElement.scrollTop,和document.body.scrollTop呢? 在以前我也是经常搞混,为什么我监听了scroll是正确的? 比如我在pc 端使用了document.body.scrollTop去获取当前的窗口的高度,始终是0,正在着急为什么是0??? 到底哪里错了.找了半天可能

canvas实现移动端和PC端刮刮卡效果

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"

让PC端页面在手机端显示缩小版的解决方法

做页面的时候我们做好pC端页面时,因编辑那边需求,在手机端页面也应该是缩小版,不能乱的.在网上找了各种解决方案,经实验,这种是可以的: 在head里边加上这两句meta <meta name="apple-mobile-web-app-capable" content="yes">  <meta name="apple-mobile-web-app-status-bar-style" content="white&qu

html与css的移动端与pc端需要注意的事项

一个移动端与pc端之间最主要的也就是尺寸问题,苹果与安卓的机型尺寸大小相差甚多,一个尺寸都会影响用户的体验.那么我们来了解一下一些常用的解决方法. 一般在网页中都会在头部有一些这样的代码 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> 1)首先 nam