js或jquery如何控制同一套html调用不同的CSS设置?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js或jquery如何控制同一套html调用不同的CSS设置?相关的知识,希望对你有一定的参考价值。
js或jquery如何控制同一套html调用不同的CSS设置?
如下,ul li我做了两套不同的css设置。我想通过点击显示方式一,调用显示方式一所对应的CSS,
点击显示方式二,调用显示方式二所对应的CSS,
(相同的html)
例:
<html>
<div>
<a href="#">显示方式一</a>
<a href="#">显示方式二</a>
</div>
<div>
<ul>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
</ul>
</div>
请大家帮帮手。最好附一个代码,谢谢了。
.yangshi_1 li
height:20px;
.yangshi_2 li
height:50px;
</style>
<div>
<a href="#" id="class1">显示方式一</a>
<a href="#" id="class2">显示方式二</a>
</div>
<div>
<ul class="" id="list">
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
</ul>
</div>
<script>
$(document).ready(function () //jq框架 $('#class1').click(function()//点击后添加样式1 去除样式2
$('#list').addClass('yangshi_1');
$('#list').removeClass('yangshi_2');
);
$('#class2').click(function()//点击后添加样式2 去除样式1 $('#list').addClass('yangshi_2');
$('#list').removeClass('yangshi_1');
);
);
</script>
//jq框架 网上有的下载追问
请问jQ框架是要用哪一种的?麻烦附一个地址,谢谢,
参考技术A <style type="text/css">.red
color:#F00;
.green
color:#0F0;
</style>
<script type="text/javascript">
function myfunction(id)
if(id=="a")
document.getElementById("ul_css").className="red";
else
document.getElementById("ul_css").className="green";
</script>
<body>
<div>
<a href="#" onclick="myfunction('a');">显示方式一</a>
<a href="#" onclick="myfunction('b');">显示方式二</a>
</div>
<div>
<ul id="ul_css" class="red">
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
</ul>
</div>
</body> 参考技术B 你方式一 和方式 二 执行不同的 脚本样式 就可以了追问
我还是一个刚入门的,对JS及jquery调用还不太熟悉。请问能不能附一个代码?
追答号了 js和 jquery 是一个父亲
追问请问能不能给一个js文件的下载地址,及如何调用的代码?我在html中应该如何去针么它们去命名等。。先谢谢了。
以上是关于js或jquery如何控制同一套html调用不同的CSS设置?的主要内容,如果未能解决你的问题,请参考以下文章
同一个css控制的一段HTML代码,但显示效果不同,这是为啥?
如何用java或js或jQuery将打开的网页保存成一个图片