怎么动态的赋属性？

ktjamy 2011-09-21 10:01:40
<div class="menu-search">
<ul>
<li><a href="#">DASHBOARD</a></li>
<li><a href="#">DROPDOWN</a></li>
<li><a href="#">TYPOGRAPHY</a></li>
<li><a href="#">BOXES GRID</a></li>
<li><a href="#">FORMS</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">TABLES</a></li>
<li><a href="#">MORE</a></li>
</ul>
</div>

我想要的效果是当鼠标点击选中哪个li的时候，该li的font-family是'MuseoSans700',Arial

好像有什么visited，但不会用，.menu-search ul li:visited {'MuseoSans700',Arial;} 这么写好像不对。

该怎么实现啊？
...全文
80 16 打赏 收藏 转发到动态 举报
写回复
用AI写文章
16 条回复
切换为时间正序
请发表友善的回复…
发表回复
beyond_me21 2011-09-21
  • 打赏
  • 举报
 回复
<script>
jQuery(document).ready(function(){
jQuery(".menu-search ul li a").bind("click",
function(){
jQuery(".menu-search ul li a").removeClass("active");
jQuery(this).addClass("active");
}
);

});
</script>
ktjamy 2011-09-21
  • 打赏
  • 举报
 回复
谢谢楼上，可以是可以了，但我点击TYPOGRAPHY这个之后，再次点击别的，比如再次点击BOXES GRID 这个的话，之前点击的怎么才能恢复到原来的样子，就是不加CSS的那种，就是点击哪个就加CSS效果，然后再点击别的之前的就恢复
beyond_me21 2011-09-21
  • 打赏
  • 举报
 回复
上面的代码少了一个闭合的</style>你自己加上
beyond_me21 2011-09-21
  • 打赏
  • 举报
 回复
你用jq，可以直接用我楼上的代码，我测试过了
beyond_me21 2011-09-21
  • 打赏
  • 举报
 回复
<style>
.menu-search ul li a.active{font-weight:bold;font-family:MuseoSans700;color:#002e68}
<script>
jQuery(document).ready(function(){
jQuery(".menu-search ul li a").bind("click",
function(){
jQuery(this).addClass("active");
}
);

});
</script>

<div class="menu-search">
<ul>
<li><a href="#">TYPOGRAPHY</a></li>
<li><a href="#">BOXES GRID</a></li>
<li><a href="#">FORMS</a></li>
<li><a href="#">GALLERY</a></li>
</ul>
</div>
ktjamy 2011-09-21
  • 打赏
  • 举报
 回复
改为
<style>
li.active a {font-weight:bold;font-family:MuseoSans700}
</style>
也不行，是不是要把那个MyFun(this) 这个写到<a href="这里面？用javascript:什么的">
beyond_me21 2011-09-21
  • 打赏
  • 举报
 回复
改为
<style>
li.active a {font-weight:bold;font-family:MuseoSans700}
</style>
试试
ktjamy 2011-09-21
  • 打赏
  • 举报
 回复
代码如下，不知道是哪里写错了，就是不管用，没有下面代码的效果出来

<script type="text/javascript">
function MyFun(obj)
{
if (obj.className='active')
{
obj.className='';
}
else
{
obj.className='active';
}
}

$(document).ready(function(){
});
</script>
<style>
li.active {font-weight:bold;font-family:MuseoSans700}
</style>
<div class="menu-search">
<ul>
<li onlick="MyFun(this);"><a href="#">TYPOGRAPHY</a></li>
<li onlick="MyFun(this);"><a href="#">BOXES GRID</a></li>
<li onlick="MyFun(this);"><a href="#">FORMS</a></li>
<li onlick="MyFun(this);"><a href="#">GALLERY</a></li>
</ul>
</div>
ktjamy 2011-09-21
  • 打赏
  • 举报
 回复
按照4楼的在li里加了onclick事件了，但是不知道为什么，不行啊
ddcatlee 2011-09-21
  • 打赏
  • 举报
 回复
visited 是指所有你点过的链接 如果你用href=# 那么所有的这些链接都是这样
你应该是加li的onclick事件
ktjamy 2011-09-21
  • 打赏
  • 举报
 回复
$(document).ready(function(){
$('.menu-search ul li a:visited').css({"font-family":"MuseoSans700","font-family":"Arial","font-weight":"bold","color":"#002e68"});
});

我这样写到js里，但为什么我页面加载的时候就显示成如上的样子，就是所有的li的字体以及颜色都变成上面css的样子了。 我想要的是当我点击哪个li的时候，哪个li就有这种css里的样子。
ktjamy 2011-09-21
  • 打赏
  • 举报
 回复
$(document).ready(function(){
$('.menu-search ul li a:visited').css({"font-family":"MuseoSans700","font-family":"Arial","font-weight":"bold","color":"#002e68"});
});

我这样写到js里，但为什么我页面加载的时候就显示成css里的样子呢？ 我想要的是当我点击哪个li的时候，哪个li就有这种css里的样子。
beyond_me21 2011-09-21
  • 打赏
  • 举报
 回复
a标签伪类才有:hover(鼠标经过)　:active(点击)　:visited(点击过)
li的伪类只有:hover(ie6及以前不支持)，而没有:active和:visited
要实现这个要求只能通过js
<style>
li.active{font-family'MuseoSans700,Arial}
</style>
function MyFun(obj)
{
if (obj.className='active')
{
obj.className='';
}
else
{
obj.className='active';
}
}
<div class="menu-search">
<ul>
<li onclick="MyFun(this);"><a href="#">DASHBOARD</a></li>
<li onclick="MyFun(this);"><a href="#">DROPDOWN</a></li>
<li onclick="MyFun(this);"><a href="#">TYPOGRAPHY</a></li>
<li onclick="MyFun(this);"><a href="#">BOXES GRID</a></li>
<li onclick="MyFun(this);"><a href="#">FORMS</a></li>
<li onclick="MyFun(this);"><a href="#">GALLERY</a></li>
<li onclick="MyFun(this);"><a href="#">TABLES</a></li>
<li onclick="MyFun(this);"><a href="#">MORE</a></li>
</ul>
</div>
光曰不日 2011-09-21
  • 打赏
  • 举报
 回复
[Quote=引用 2 楼 personball 的回复:]

.menu-search ul li a:visited {'MuseoSans700',Arial;}
[/Quote]
visited只对a标签起作用，2楼++
personball 2011-09-21
  • 打赏
  • 举报
 回复
.menu-search ul li a:visited {'MuseoSans700',Arial;}
001007009 2011-09-21
  • 打赏
  • 举报
 回复 


<!doctype html>

<html>

	<head>

		<meta charset="gb2312" />

		<style>

			.on { color:red; font-size:40px;}

		</style>

	</head>

	<body>

		<div class="menu-search">

			<ul>

				<li><a href="#">DASHBOARD</a></li>

				<li><a href="#">DROPDOWN</a></li>

				<li><a href="#">TYPOGRAPHY</a></li>

				<li><a href="#">BOXES GRID</a></li>

				<li><a href="#">FORMS</a></li>

				<li><a href="#">GALLERY</a></li>

				<li><a href="#">TABLES</a></li>

				<li><a href="#">MORE</a></li>

			</ul>

		</div>

		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

		<script>

			$('.menu-search li').click(function(){

				$(this).addClass('on').siblings().removeClass('on');

				return false;

			})

		</script>

	</body>

</html>


楼主 这个意思?
C# 动态类创建、动态创建属性和取动态类属性值
动态类创建、动态属性建立、赋值和取值
js给对象动态添加属性的2种方法
js给对象动态添加属性的2种方法 for of 遍历对象，得到对象 for in 遍历对象 ，得到对象的下标 补充： this.videoList = [] const data = await this.$http.post('Course/shows', { type: nedCuriculums.type,...
C#类两种动态添加属性并赋值的解决方法
功能：将DataTable 中的colums名称作为属性动态添加到类中，将DataTable中的第一行数据给属性赋值 1.第一种方法 使用Dynamic 支持.net4.0以上版本支持 /// <summary> /// 使用dynamic根据DataTable的...
ts动态修改html属性,jQuery css方法动态修改CSS属性
jQuery css方法动态修改CSS属性定义和用法css() 方法返回或设置匹配的元素的一个或多个样式属性。返回 CSS 属性值返回第一个匹配元素的 CSS 属性值。注释：当用于返回一个值时，不支持简写的 CSS 属性(比如 ...
Vue动态绑定属性—指令v-bind
1、v-bind指令的介绍和基本使用 ...而很多时候我们的属性值也是需要变化的，比如src可能是从服务器请求过来的，把值放到vue实例的data中，然后将data中的属性赋到模板中的属性里面，我们只需要修改data中的值就可以实时
CSS

61,112

社区成员

60,730

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章