这种效果有人会弄吗？

xiaodongdong321 2012-11-22 10:30:39

如图

hao123网站那个搜索上面的文字点那里那里就是变色，其他的就不变了，这样的效果有人会弄吗？

...全文

478 20 打赏收藏转发到动态举报

写回复

用AI写文章

20 条回复

切换为时间正序

请发表友善的回复…

发表回复

lht2369126 2012-12-15

打赏
举报

去网上找JS选项卡

lanselixiang 2012-12-15

打赏
举报

这个问题不复杂

yankunlin 2012-12-14

打赏
举报

先获取到点击的元素,然后设置class 属性,,再设置同级元素class 属性

qianyu_1989 2012-12-11

打赏
举报

鼠标事件或者用 css 样式当点击谁的时候就加一个类名 class="on" 然后给这个类加背景图片设置padding值就OK 了

展S开K双Y翼 2012-12-08

打赏
举报

鼠标事件控制就行了

西門冠希 2012-12-08

打赏
举报

A:HOVER

lanselixiang 2012-12-08

打赏
举报

这种都是比较基础的问题，如果想提升自己的布局，还需要学习一下js or jq

yaganblw 2012-12-08

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>Demo hao123</title>

    <style type="text/css">

    body { margin:0 auto; background:#f3f3f3; font-size:12px;}

    ul,li { padding:0; margin:0;}

    ul { list-style:none;}

    #container { width:600px; height:400px; border-radius:5px; border:1px solid gray; margin:40px auto;}

    #container .menu { margin:20px 10px 10px 40px;}

    .menu li { float:left; width:25px; height:22px; line-height:22px;padding:3px 15px; margin:5px;border-radius:3px; cursor:pointer;} 

    .menu li.on { background:green; color:White;}

    #container .textbox { width:570px; margin:10px 10px 10px 20px;}

    .textbox li { float:left; width:520px; padding:10px;}

    .textbox .title { color:#ae361f; font-size:14px; font-weight:bold; margin-right:20px;}

    .textbox .box { height:25px; width:350px; border:1px solid #666; line-height:25px; padding-left:2px;}

    .textbox .btn { height:28px; width:80px;margin-left:20px; border:1px solid #9d9c9c; background-color:#e6e3e3; border-radius:3px; cursor:pointer; outline:none;}

    .textbox .btn:hover { background-color:#f1f0f0;}

    </style>

</head>

<body>

<div id="container">

    <ul class="menu">

        <li class="on">网页</li>

        <li>音乐</li>

        <li>视频</li>

        <li>图片</li>

        <li>贴吧</li>

        <li>知道</li>

        <li>新闻</li>

        <li>地图</li>

    </ul>

    <ul class="textbox">

        <li>

            <span class="title">网页</span>

            <input type="text" name="webpage" class="box" />

            <input type="button" name="page-btn" class="btn" value="百度一下" />

        </li>

        <li>

            <span class="title">音乐</span>

            <input type="text" name="music" class="box" />

            <input type="button" name="music-btn" class="btn" value="百度一下" />

        </li>

         <li>

            <span class="title">视频</span>

            <input type="text" name="video" class="box" />

            <input type="button" name="video-btn" class="btn" value="百度一下" />

        </li>

         <li>

            <span class="title">图片</span>

            <input type="text" name="pic" class="box" />

            <input type="button" name="pic-btn" class="btn" value="百度一下" />

        </li>

         <li>

            <span class="title">贴吧</span>

            <input type="text" name="bar" class="box" />

            <input type="button" name="bar-btn" class="btn" value="百度一下" />

        </li>

         <li>

            <span class="title">知道</span>

            <input type="text" name="know" class="box" />

            <input type="button" name="know-btn" class="btn" value="百度一下" />

        </li>

         <li>

            <span class="title">新闻</span>

            <input type="text" name="news" class="box" />

            <input type="button" name="news-btn" class="btn" value="百度一下" />

        </li>

         <li>

            <span class="title">地图</span>

            <input type="text" name="map" class="box" />

            <input type="button" name="map-btn" class="btn" value="百度一下" />

        </li>

    </ul>

</div>

<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>

<script type="text/javascript">

    $(function () {

        $(".textbox > li").first().show().siblings("li").hide();

        $(".menu > li").click(function () {

            var index = $(this).index();

            $(".textbox > li").eq(index).show().siblings("li").hide();

            $(this).addClass("on").siblings("li").removeClass("on");

        });

    });

</script>

</body>

</html>

效果：

xiaodongdong321 2012-11-25

打赏
举报

看过了，就是比较复杂，谁有简单点的代码

p2227 2012-11-25

打赏
举报

你看到的网页就是一份最好的源代码，你先认真看过了再来提问吧

xiaodongdong321 2012-11-25

打赏
举报

用css怎么实现？代码怎么样？还是不懂

meiyu2010 2012-11-23

打赏
举报

用谷歌浏览器，hao123网站首页邮件，在你想查的位置审查元素，右边都是CSS代码，自己去查查就好了，很简单。。

net_php 2012-11-23

打赏
举报

引用 5 楼 honey0503 的回复:

给它弄一张背景图片，设置点击的时候更换背景图片就可以实现你想要的那个效果…… 貌似是a:linked{background-image:***}，可以查证一下哦

这是个好办法，我以前也是这样实现的。

wbb123yu 2012-11-23

打赏
举报

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" />
<title>splice</title>
<style type="text/css" media="screen">
	#ddd li {background: #fff;}
	#ddd .selected {background: #333;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$("#ddd li").click(function(){
			$(".selected").removeClass("selected");
			$(this).addClass("selected");
		})
	});
</script>
</head>

<body>
	<ul id="ddd">
		<li class="selected">2222</li>
		<li>2222</li>
		<li>2222</li>
		<li>2222</li>
		<li>2222</li>
	</ul>
</body>
</html>

honey0503 2012-11-23