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>

请大家帮帮手。最好附一个代码,谢谢了。

<style type="text/css">
.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将打开的网页保存成一个图片

JQuery

如何在单独的js文件里调用jquery

jquery或js调用adobe打印插件打印html指定区域

如何使用 jQuery 从项目目录下载或获取文件