tab切换(onmouseover/onclick)

<style>

 

</style>

<div id="tab_bar">
  <ul>

    <li id="tab1" style="background-color: white; color:red;" onmouseover="myclick(1)">实时资讯</li>
    <li id="tab2" onmouseover="myclick(2)">外汇资讯</li>
    <li id="tab3" onmouseover="myclick(3)">专家策略</li>
  </ul>
</div>

<div class="tab_css" id="tab1_content"></div>

<div class="tab_css" id="tab2_content"></div>

<div class="tab_css" id="tab3_content"></div>

<script>

var myclick = function(v) {

var div=document.getElementById(‘tab_bar‘);
var llis=div.children[0].children;
for(var i = 0; i < llis.length; i++) {
var lli = llis[i];
if(lli == document.getElementById("tab" + v)) {
lli.style.backgroundColor = "white";
lli.style.color = "red";
// lli.style.borderbottom = "none";
} else {
lli.style.backgroundColor = "#efefef";
lli.style.color = "#353535";
}
}

var divs = document.getElementsByClassName("tab_css");
for(var i = 0; i < divs.length; i++) {

var divv = divs[i];

if(divv == document.getElementById("tab" + v + "_content")) {
divv.style.display = "block";
} else {
divv.style.display = "none";
}
}

};

</script>

时间: 2024-08-02 04:44:02

tab切换(onmouseover/onclick)的相关文章

作业——tab切换简易版

1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>tab切换简易版</title> 5 <meta charset="utf-8"> 6 <style> 7 body { margin:0; padding:0; font:normal 12px/1.5em "Microsoft Yahei", Verdana, Arial, Helvetic

JavaScript - Tab切换效果

简单Tab切换效果 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&

原生javascript实现Tab切换

tab切换在各大主流页面有广泛的应用,今天来分享一个用原生javascript来实现类似京东购物边栏的TAB.对于正在使用web前端开发(http://www.maiziedu.com/course/web/)网站的朋友,是非常有用的哦. 首先以下是一段边栏HTML框架代码 <body> <div class="wrap"> <div id="left"> <ul id="leftList"> &l

原生JS实现tab切换--web前端开发

tab切换非常常见,应用非常广泛,比较实用,一般来说是一个网站必不可少的一个效果.例如:https://123.sogou.com/中的一个tab部分: 1.案例源代码 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>tab切换</title> <style> *{margin: 0;paddin

JavaScript跳转到指定页面并且到指定的tab切换窗口

案例的解析就是点击A页面的第一个的切换窗口的按钮跳转到B页面,再点击B页面的按钮跳转到A页面的第二个窗口,这个实现的效果有三种方法,下面的图片案例: A页面的第一个切换窗口 B页面的跳转按钮 A页面的第二个切换窗口 第一方法用函数function: 演示效果:JavaScript跳转到指定页面并且到指定的tab切换窗口 A页面按钮 <a href="b.html?id=1980&order_type=p_order">aaaaa</a> B页面按钮代码:

tab切换代码优化

上次的tab切换的代码里面有很多重复的代码,需要做做优化,把重复的代码用函数封装起来调用. 优化前: 1 <script> 2 //获取id封装成一个函数$()方便调用 3 function $(id){ 4 //如果传入的参数类型为字符串则获取当前ID元素,否则返回id 5 return typeof id==="string"?document.getElementById(id):id; 6 } 7 function tab(){ 8 //声明 索引index,两个变

Tab切换练习

2016年1月6日     星期三     天气小雨 关于Tab切换练习 1.Html部分 <body> <div id=con> <ul id=tags> <li class="selectTag"><a onMouseOver="selectTag('tagContent0',this)" href="javascript:void(0)">标签一</a> </li

react做tab切换的几种方式

最近搞一个pc端的活动,搞了一个多月,甚烦,因为相比于pc端,更喜欢移动端多一点.因为移动端又能搞我的react了. 今天主要总结一下react当中tab切换的几种方式,因为tab切换基本上都会用到.当然,你也可以在react当中用jquery或者zepto来实现,不过既然都用react了,能不能用jq,就尽量不用jq.不过不得不吐槽一下,在jquery很简单的东西,在react中稍微复杂化了一点. 目前我用到的tab切换只有两种方式,所以暂时总结这两种,以后有遇到其他的再总结. 第一种.只是子

JS控制下的双层Tab切换

如题,JS控制下的双层Tab切换,其实只要想通了原理,实现起来很简单! 首先,附上CSS <style type="text/css"> img{border:none;padding:0px; margin:0 auto;} ul,li{list-style-type:none; margin:0px; padding:0px;} body {font-family:ì,Dì,oúì,Arial,Helvetica,sans-serif;font-size:12px;co