使用CSS如何实现鼠标点击元素后向该元素添加样式

<a href="portal.php">首页</a>
<a href="forum.php" >聚焦</a>
<a class="{if $mod == 'ranklist'} current{/if}" href="misc.php?mod=ranklist" >热榜</a>
<a class="{if $mod == 'guide'} current{/if}" href="forum.php?mod=guide">广场</a>

这四个链接, “热榜”和“广场” 点击进去后 会显示“current”样式
“current”样式是字体变粗~

“首页”和“聚焦” 应该如何用添加if语句,让它也能点击进去之后~显示“current”样式?

如果if语句实现不了,JS应该怎么写?

使用CSS实现鼠标点击元素后向该元素添加样式,首先需要理解这个点击事件,通过单独的css或者是html是无法实现的,一般都需要结合Js来做,需要获取到这个元素,然后在通过js来改变元素的样式,在html中需要添加一个点击事件,也就是onclick,然后就是可以来实现,具体看下代码:
<html>
<head>
<style>
#round{
width:300px;
height:200px;
}
</style>
</head>
<script>
function iLeft(){
var oDiv = document.getElementById('round');
oDiv.style.left = 400+'px'; //通过js改变这个div的left值
}
</script>
<body>
<div id='round'>
<p><a href='' onclick="iLeft()" >我是测试文字</a></p>
</div>
</body>
</html>
温馨提示:内容为网友见解,仅供参考
第1个回答  2013-08-16
<a href="portal.php"{if CURSCRIPT == 'portal'} class="current"{/if}
>首页</a>
<a href="forum.php"{if CURSCRIPT == 'forum' && CURMODULE == 'index'} class="current"{/if}>聚焦</a>

应该是discuz...

第2个回答  2013-08-16
例如<a href="#2" onclick="nav()"></a>
<script type="text/javascript">
function nav(){
function hasClass(element, className) {

var reg = new RegExp('(s|^)'+className+'(s|$)');

return element.className.match(reg);

}

function addClass(element, className) {

if (!this.hasClass(element, className))

{

element.className += " "+className;

}
</script>本回答被网友采纳

如何用它css设置鼠标单击后的样式
答案:使用CSS可以通过伪类 `:active` 来设置鼠标单击后的样式。当用户与元素交互时,该元素会短暂地应用此样式。详细解释:1. CSS伪类 `:active` 的作用:在CSS中,伪类是一种特殊类型的类,用于选择处于特定状态的元素。`:active` 伪类用于选择用户单击的元素。这意味着当用户与页面上的某个元素进行...

如何用它CSS设置鼠标单击后的样式
要实现鼠标单击后CSS样式的改变,你需要的基本工具包括电脑、浏览器和HTML编辑器。以下是一个简单的步骤指南:首先,启动HTML编辑器,创建一个新的文件,例如命名为"index.html"。接着,进入编辑器,在index.html文件中找到并插入

如何用它CSS设置鼠标单击后的样式
1、首先,打开html编辑器,新建html文件,例如:index.html。2、在index.html中的标签中,输入css代码:a:visited {color: blueviolet;}。3、浏览器运行index.html页面,此时超链接文本单击后的样式被设置了文字紫色颜色。

css+div html 鼠标滑过div里的内容变样式?
1、先在找个文件夹创建文件index.html。2、然后用能编辑文本文件的软件打开index.html,index.html的初始内容如图。3、接着编写两个样式作为鼠标移动时div修改的样式。4、然后编写js代码修改div的样式。5、编辑完index.html后保存,在浏览器中打开index.html。效果如图。鼠标移入移出div时,div的样式改变...

HTML中鼠标悬浮时的下拉菜单用CSS怎么做
:hover 伪类在鼠标移到元素上时向此元素添加特殊的样式。例子1 a:hover {color: #FF00FF}延时文本当鼠标移动到a标签上的时候,改变a标签的文字颜色深入用法,当移动到某标签的时候改变其它标签的样式:例子: 菜单 弹出菜单1 弹出菜单2 ...

如何让鼠标经过某一个元素的时候改变形状?
green;} 上面的代码实现了我们的要求,只要在相关元素样式上添加如下代码即可:[CSS] 纯文本查看 复制代码1cursor:pointer 关于鼠标指针形状定义参阅css设置鼠标指针形状代码简单介绍一章节。自定义鼠标指针形状参阅css如何自定义鼠标指针一章节。

css如何设置鼠标指针的样式?
材料\/工具:css 1、打开前端开发软件,新建一个html代码页面 2、在新建的html代码页面上找到,在这个标签里创建一个标签,a案例中使用的是。代码: 大家好,鼠标放到我身上就可看到效果 3、为新家添加鼠标指针为手指样式。在html代码页面中找到<tilte>,在这个后面创建一个,然后在中新建一个样式类,...

css行内样式hover(css行内样式写法)
当鼠标悬浮时,通常使用伪元素:hover来修改样式,如何在鼠标悬浮时修改html内容? :hover是无法修改html内容,但是可以通过一系列的样式变化,达到当鼠标悬浮时,改变html内容。 用JS可以通过innerHtml来修改,在此不介绍。 纯CSS实现鼠标放上去改变文字内容 先上代码html divclass="par" divclass="show" 平时显示的文字 ...

CSS DIV 怎么做出来鼠标移动上就显示其内容?
1、新建html文档,在body标签中添加一个div标签,然后在div标签中添加p标签,为p标签添加内容:2、为了方便演示,给div标签设置宽高和背景颜色,然后给p标签设置“display”属性,属性值为“none”,这样p标签中的文字默认情况下不会显示:3、给div设置hover伪类,当鼠标移动到div区域时,设置p标签的样...

怎么用CSS修改鼠标样式
\/* css注释: 设置鼠标移动到a超链接对象时鼠标变为手指形状(链接选择) *\/body { cursor: url("小图片地址")} \/* 设置鼠标指针默认为一个小图片 *\/。常用的设置鼠标样式方法就是这么多,你学会了吗?相关阅读:用css实现css动画的暂停与播放功能教程怎样用CSS加粗字体怎样让css图片居中显示 ...

相似回答