如何利用JS实现在li中添加或删除class属性

Posted 2023-04-23

想实现：
默认首页会有class=“center"，当点击新闻/图片后，清除首页的class，添加新闻/图片的class="center"
我的代码如下，但好像不起作用，哪位朋友帮忙分析一下，谢谢！
<ul id="test">
<li onclick="setCurrent(0)"><a href="#">首页</a></li>
<li onclick="setCurrent(1)"><a href="#">新闻</a></li>
<li onclick="setCurrent(2)"><a href="#">图片</a></li>
</ul>

<script type="text/javascript">
function setCurrent(i)
var parentElement = document.getElementById("test").getElementsByTagName("li");
for (var j=0;j<parentElement.children.length;j++)
parentElement.children[j].className = (i==j)?:"center":""; //"center"是class名称


</script>

可以使用jQuery的attr方法来实现对某一元素的的class的属性的添加或者删除，attr() 方法设置或返回被选元素的属性值.根据该方法不同的参数，其工作方式也有所差异，可以使用removeclass来删除class属性。

工具原料：编辑器、浏览器

1、为li添加class属性：

为某个li元素添加class=“special”的属性

$(\'li\').attr(\'class\',\'special\');

2、删除class属性：

 $("li").removeClass("special");
); 参考技术A 用jquery简单 原js的话循环里面加个判断
if(j==i)
parentElement[j]..className="center";


还有你循换里应该没有那个children
如果想要jqurey的话我再给你写 要是程序不要jquery上面的就可以追问

谢谢回答，是要改成这样吗，我是js菜鸟。
for (var j=0;j<parentElement.children.length;j++)
if(j==i)
parentElement[j].className="center";

追答

$( function()
$("#test li").click(function()

$("#test li").removeClass("center");
$(this).addClass("center");
);


用这个吧简单 还不用在标签里写onclick传值了
你程序里有jquery.js就行web项目现在一般的话都用类似用ajax什么的都方便不用原始的了
不会用的话追问我

追问

我是新建了一个js文件，然后在htm文件里边引用的，但好像不起作用，可以直接在htm文件里写你的函数吗。

追答

可以但是前提是要有html要导入jquery.js这个例如

你程序没有就下载一个你要是做项目肯定会用到 我给你写个完成页面

首页
新闻
图片

$( function()
$("#test li").click(function()

$("#test li").removeClass("center");
$(this).addClass("center");
);

本回答被提问者采纳 参考技术B function setCurrent(i)
var pe = document.getElementById("test");
for (var j = 0; j < pe.children.length; j++) 
pe.children[j].className = i == j ? : "center" : "";

追问

谢谢回答，代码解决不了问题。

参考技术C <div class="head_nav clearfix">
<ul class="nav">
<li onclick="setCurrent(0)"><a href="#" class="CCC">AAA</a>
<li onclick="setCurrent(1)"><a href="#" class="BBB">BBB</a></li>
<li onclick="setCurrent(2)"><a href="#" class="CCC">CCC</a></li>
</ul>
</div>
<script type="text/javascript">
function setCurrent(i)
var parentElement = document.getElementById("nav");
for (var j=0;j<parentElement.children.length;j++)
parentElement.children[j].className = (i==j)?:"currentStyleName":"otherStyleName";


</script>
希望对你能有所帮助。追问

您是Copy过来的吗？

js里面怎么动态的为对象添加属性

添加属性用setAttribute()方法，可以传入两个参数，第一个是属性名称，第二个是要设置的属性值

var li = document.getElementsByTagName('li')[0];
//设置 li 属性，如 data-falg,设置为true
li.setAttribute("data-falg", "true");

也可以获取属性用getAttribute(),传入一个参数，是想获取的属性名称，返回的是该属性的值

参考技术A 情景1. 需要内存地址不变的话, 用 `Object.assign`,
例子:
let aObj = bObj = t: t: 't' ;
let newObj = t2: 't2' ;
Object.assign(aObj, newObj);
console.log(aObj === bObj); // true; 内存地址相同, 修改的原对象
____________________________________________________
情景2. 不考虑内存地址, 原对象可抛弃, 用 `...obj` 重新赋值
例子:

let cObj = dObj = t3: t3: 't3' ;
let newObj2 = t4: 't4' ;
cObj = ...cObj, newObj2 ;
console.log(cObj === dObj); // false; 内存地址不同, 创建的新对象
--------------------------------------------------
或者 Object.assign 重新赋值,第一个参数设为空对象
例子:
let eObj = fObj = t5: t5: 't5' ;
let newObj3 = t6: 't6' ;
eObj = Object.assign(, eObj, newObj3;
console.log(eObj === fObj); // false; 内存地址不同, 创建的新对象 参考技术B js给div添加样式是document.getElementById("111").style.width="100px";
jq的是$("").css("width","100px"),
jq的是$("").css(
width:"100px",
height:"100px"
),