                        课程
                    
                        /前端开发
                        
                            /jQuery
                        
                        /jQuery基础课程

有谁是按照提示那样写出来的，给我看看呗

有谁是按照提示那样写出来的，给我看看呗

小石头45677

2016-01-29

源自：jQuery基础课程 3-13

关注问题我要回答

452

操作

收起

4 回答

qq_筱夏_0 回答被采纳 +3 积分
2016-01-29

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>挑战题</title>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>

</head>

<body>

<ul>

<li title="简化">1</li>

<li title="简化">2</li>

<li title="简化">3</li>

<li title="简化">4</li>

<li title="更多">5</li>

<li title="更多">6</li>

<li title="更多">7</li>

<li title="更多">8</li>

<li title="简化">9</li>

</ul>

<a href="#" onclick="more()" class="">更多</a>

<script type="text/javascript">

//将除了前四个和最后一个li以外的<li>元素设置为隐藏

$("li[title='更多']").css('display', 'none');

function more() {

if ($("a").attr('class') == "") { //点击“更多”

$("a").attr('class', 'active'); //将a元素的class属性赋值为active

$("a").html("简化"); //将a元素的文本内容改为“简化”

$("li[title='更多']").css('display', '');//将隐藏的<li>元素显示出来

}

else {//点击“简化”

$("a").attr('class', ''); //将a元素的class属性赋值为空

$("a").html("更多"); //将a元素的文本内容改为“更多”

$("li[title='更多']").css('display', 'none'); //将除了前四个和最后一个li以外的<li>元素设置为隐藏

}

}

</script>

</body>

</html>

0 回复有任何疑惑可以回复我~

#1

小石头45677 提问者

非常感谢！

2016-01-30 回复有任何疑惑可以回复我~

走马灯
2016-03-10

<html >

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>

</head>

<body>

<ul>

<li title="简化">1</li>

<li title="简化">2</li>

<li title="简化">3</li>

<li title="更多">4</li>

<li title="更多">5</li>

<li title="更多">6</li>

<li title="更多">7</li>

<li title="更多">8</li>

</ul>

<a href="#">更多</a>

<script type="text/javascript">

$("li[title='简化']").css("display","none");

$("a").click(function(){

if($("li[title='简化']").is(":hidden")){

$("a").html("简化");

$("li[title='简化']").css("display","");

}

else{

$("a").html("更多");

$("li[title='简化']").css("display","none");

}

});

</script>

</body>

</html>

0 回复有任何疑惑可以回复我~

宇xixi
2016-02-03

<script type="text/javascript">
    $("a").click(function(){
        var ahtml = $("a").html();
        alert(ahtml);
        if(ahtml == '更多'){
            $("a").html('简化');
            $("li").css("display","");
        }else{
            $("a").html('更多');
            $("li").not(":last-child").css("display","none");
        }
    });
    </script>

1 回复有任何疑惑可以回复我~

Beckybei
2016-02-01

<html>

<head>

<style type="text/css">

</style>

<script src="./jquery-2.2.0.min.js">

</script>

</head>

<body>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

<li>6</li>

<a href="#">更多</a>

<li>7</li>

</ul>

<script type="text/javascript" >

$(function(){

$("li:gt(3):not(:last)").css("display","none");

$("a").click(function(){

if($("a").text()=="更多"){

$("a").text("简化");

$("li:gt(3):not(:last)").css("display","");

}else{

$("a").text("更多");

$("li:gt(3):not(:last)").css("display","none");

}

})

})

</script>

</body>

</html>

1 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

jQuery基础课程

参与学习 154768 人
解答问题 7184 个

加入课程学习，有效提高前端开发速度

有谁是按照提示那样写出来的，给我看看呗

我要回答关注问题

意见反馈帮助中心 APP下载