各位大侠,以下虽然定义了两个样式,但样式二却包含了样式一了,也就是样式二的那个
- 除了执行样式二之外,还同时执行了样式一,我想让他们两个独立,不相互包容,怎么改呢?
样式一图
样式二图
样式一:不修改这里
---------------------------------------------------------------------------------------------
样式二:这里跟上面重复样式,如何修改
回复讨论(解决方案)
是不是点击之后出的效果,js呢?贴出来
<script></script>
<script></script>
<script> <br /> function selectTag(showContent,selfObj){ <br /> var tag = document.getElementById("tags").getElementsByTagName("li"); <br /> var taglength = tag.length; <br /> for(i=0; i<taglength; i++){ <br /> tag[i].className = ""; <br /> } <br /> selfObj.parentNode.className = "selectTag"; <br /> for(i=0; j=document.getElementById("tagContent"+i); i++){ <br /> j.style.display = "none"; <br /> } <br /> document.getElementById(showContent).style.display = "block"; <br /> } <br /> </script>
<script> <br /> window.onload=function(){ <br /> var size = new Select("size",{ <br /> Radio :true , <br /> OnClick:function(selected){ <br /> document.form.size.value = selected.join(",") <br /> document.form.color.value=''; <br /> } <br /> }); <br /> } <br /> </script>
<script> <br /> $(function() { <br /> $('#tabs').tabs(); <br /> }); <br /> </script>
|
<script> <br /> function Select(id,config){ <br /> this.config = config||{}; <br /> this.id = typeof(id)=='string'?document.getElementById(id):id; <br /> this.items = this.id.getElementsByTagName("li"); <br /> this.selectClass = "select"; <br /> this.selected = new Array(); <br /> var _this = this; <br /> this.selectOpt = function(value,opt){ <br /> var exist = false; <br /> for(var i=0;i<_this.selected.length;i++){ <br /> if(_this.selected[i]==value){ <br /> exist = true ; <br /> if(opt=="remove"){ _this.selected.splice(i,1);} <br /> break; <br /> } <br /> } <br /> if(!exist && opt=="add"){_this.selected.push(value);} <br /> }; <br /> //初始化对象 <br /> (function(_this){ <br /> //是否有默认配置的选择项 <br /> if(_this.config.Default){ <br /> var arr = _this.config.Default.split(","); <br /> for(var i=0;i<arr.length;i++)_this.selectOpt(arr[i],"add"); <br /> } <br /> for(var i=0;i<_this.items.length;i++){ <br /> //将defalut中配置的项加上样式 <br /> if( _this.selected.join(",").indexOf(_this.items[i].getAttribute('dataValue'))>-1 && _this.items[i].className==""){ <br /> _this.items[i].className=_this.selectClass; <br /> } <br /> //如果有样式中定义了默认 <br /> if(_this.items[i].className==_this.selectClass){ <br /> _this.selectOpt(_this.items[i].getAttribute('dataValue'),"add"); <br /> } <br /> //加点单击事件 <br /> _this.items[i].onclick=function(){ <br /> //是否为单选 <br /> var radio = _this.config.Raido?_this.config.Raido:true; <br /> if(_this.config.Radio==null || _this.config.Radio){ <br /> if(this.className!=_this.selectClass){ <br /> var items = this.parentNode.getElementsByTagName("li"); <br /> for(var i=0;i<items.length;i++){ <br /> items[i].className=""; <br /> } <br /> _this.selected.length = 0; <br /> _this.selected.push(this.getAttribute('dataValue')); <br /> this.className=_this.selectClass; <br /> } <br /> }else{ <br /> var Max = _this.config.Max?_this.config.Max:1; <br /> if(this.className==_this.selectClass){ <br /> this.className=""; <br /> _this.selectOpt(this.getAttribute('dataValue'),"remove"); <br /> }else{ <br /> if(_this.selected.length>=Max){ <br /> alert("最多只能选择"+Max+"项"); <br /> }else{ <br /> this.className=_this.selectClass; <br /> _this.selectOpt(this.getAttribute('dataValue'),"add"); <br /> } <br /> } <br /> } <br /> //去掉那个虚线框 <br /> this.firstChild.blur(); <br /> //调用回调函数 <br /> if(_this.config.OnClick)_this.config.OnClick.call(this,_this.selected); <br /> return false; <br /> } <br /> } <br /> })(_this); <br /> } <br /> </script>
楼主 说 a:hover 的效果 重叠了吗?
<html><head><meta http-equiv="Content-Language" content="zh-cn"><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><script type="text/javascript" src="http://www.heredc.com/js/jquery-ui-1.8.18.custom.min.js"></script><script type="text/javascript" src="http://www.heredc.com/js/jquery.min.js"></script><!--这里是内容B的--><script type="text/javascript"> function selectTag(showContent,selfObj){var tag = document.getElementById("tags").getElementsByTagName("li");var taglength = tag.length;for(i=0; i<taglength; i++){tag[i].className = "";}selfObj.parentNode.className = "selectTag";for(i=0; j=document.getElementById("tagContent"+i); i++){j.style.display = "none";}document.getElementById(showContent).style.display = "block";}</script><style type="text/css">ul,dl,dd,h1,h2,h3,h4,h5,h6,form,p,input,li{ padding:0; margin:0;}ul,li{list-style-type:none;}img { border:0;}.clear{clear:both;line-height:1px;}#con { margin:20px auto;}#tags {width: 750px; height: 27px;position:relative;bottom:-3px;}/* 切换风格start*/#tags LI {background: url(http://www.heredc.com/js/tab/tab_bg_left_02.gif) no-repeat left bottom; float: left; margin-right: 1px; margin-right: 6px;list-style:none; height: 24px}#tags LI A {padding:0 20px 0 20px;background: url(http://www.heredc.com/js/tab/tab_right_02.gif) no-repeat right bottom; float: left;color: #000; line-height: 24px;height: 24px; text-decoration: none;}/* 切换风格end*/#tags LI.emptyTag {background: none transparent scroll repeat 0% 0%; width: 4px;}#tags LI.selectTag {background-position: left top; margin-bottom: -2px; position: relative;top:-2px; height: 27px;}#tags LI.selectTag A {padding:0 20px 0 20px;background-position: right top; font-size:14px;color: #fff;font-weight:bold; line-height: 25px; height: 27px;}#tags LI A p{position:relative;top:2px;}#tagContent {border-top: #fa4e86 2px solid;}/*粉色02*/.tagContent { display: none;}#tagContent DIV.selectTag {display: block;}</style><!--这里是内容A的--><script type="text/javascript">window.onload=function(){ var size = new Select("size",{ Radio :true , OnClick:function(selected){ document.form.size.value = selected.join(",") document.form.color.value='';}});}</script><style type="text/css">ul{list-style-type:none;}ul li{float:left;display:inline;margin-right:5px;width:auto;overflow:hidden;}ul li a{display:block;border:1px solid #CCCCCC;padding:5px 6px 5px 6px;margin:1px;}.test a:hover{border:2px solid #FF6701;margin:0px;}.select{}.select a{border:2px solid #FF6701;margin:0px;background:url(http://www.heredc.com/js/2010083011191628.gif) no-repeat no-repeat right bottom;}</style><!--这个JS是内容B的--><script type="text/javascript">$(function() {$('#tabs').tabs();});</script> </head><body><table border="0" cellpadding="0" cellspacing="0" width="100%" id="table22"><tr><td><!--内容A--><ul id="size" class="test"><li dataValue="1"><a href="javascript:void(0)" onclick="Rchange(1,'myys')">S</a></li><li dataValue="2"><a href="javascript:void(0)" onclick="Rchange(2,'myys')">X</a></li><li dataValue="3"><a href="javascript:void(0)" onclick="Rchange(3,'myys')">XL</a></li></ul><br><br><!--内容B--><DIV id="con"><UL id="tags"> <LI class="selectTag"><A onClick="selectTag('tagContent0',this)" onFocus="this.blur()" href="javascript:void(0)"><p>商品介绍</p></A></LI><LI><A onClick="selectTag('tagContent1',this)" onFocus="this.blur()" href="javascript:void(0)"><p>评价详情(<font color="#0066FF">0</font>)</p></A></LI><LI><A onClick="selectTag('tagContent2',this)" onFocus="this.blur()" href="javascript:void(0)"><p>成交记录(<font color="#0066FF">50</font>)</p></A></LI></UL><DIV id="tagContent"> <DIV class="tagContent selectTag" id="tagContent0">001</DIV><DIV class="tagContent " id="tagContent1">002</DIV><DIV class="tagContent " id="tagContent2">003</DIV></DIV></DIV> </td></tr></table></body></html><!--这个JS是内容A的--><script language="javascript" type="text/javascript">function Select(id,config){ this.config = config||{}; this.id = typeof(id)=='string'?document.getElementById(id):id; this.items = this.id.getElementsByTagName("li"); this.selectClass = "select"; this.selected = new Array(); var _this = this; this.selectOpt = function(value,opt){ var exist = false; for(var i=0;i<_this.selected.length;i++){ if(_this.selected[i]==value){ exist = true ; if(opt=="remove"){ _this.selected.splice(i,1);} break; } } if(!exist && opt=="add"){_this.selected.push(value);} }; //初始化对象 (function(_this){ //是否有默认配置的选择项 if(_this.config.Default){ var arr = _this.config.Default.split(","); for(var i=0;i<arr.length;i++)_this.selectOpt(arr[i],"add"); } for(var i=0;i<_this.items.length;i++){ //将defalut中配置的项加上样式 if( _this.selected.join(",").indexOf(_this.items[i].getAttribute('dataValue'))>-1 && _this.items[i].className==""){ _this.items[i].className=_this.selectClass; } //如果有样式中定义了默认 if(_this.items[i].className==_this.selectClass){ _this.selectOpt(_this.items[i].getAttribute('dataValue'),"add"); } //加点单击事件 _this.items[i].onclick=function(){ //是否为单选 var radio = _this.config.Raido?_this.config.Raido:true; if(_this.config.Radio==null || _this.config.Radio){ if(this.className!=_this.selectClass){ var items = this.parentNode.getElementsByTagName("li"); for(var i=0;i<items.length;i++){ items[i].className=""; } _this.selected.length = 0; _this.selected.push(this.getAttribute('dataValue')); this.className=_this.selectClass; } }else{ var Max = _this.config.Max?_this.config.Max:1; if(this.className==_this.selectClass){ this.className=""; _this.selectOpt(this.getAttribute('dataValue'),"remove"); }else{ if(_this.selected.length>=Max){ alert("最多只能选择"+Max+"项"); }else{ this.className=_this.selectClass; _this.selectOpt(this.getAttribute('dataValue'),"add"); } } } //去掉那个虚线框 this.firstChild.blur(); //调用回调函数 if(_this.config.OnClick)_this.config.OnClick.call(this,_this.selected); return false; } } })(_this); }</script>
@calmcrime
对的。内容A的样式和内容B的样式重叠了,我想实现的是:内容A用内容A的样式,内容B用内容B的样式,互不干扰。谢谢
因为内容A的样式比较重要,所以希望大哥能帮我修改内容B的样式,不要修改A的样式,谢谢
是3楼的意思吗?
是3楼的意思吗?
大侠,我留言给你了,麻烦你看看,或者加我QQ 77644278,在QQ里截图给你看可能更清晰一些,谢谢!
@calmcrime
大侠,或者你把代码做成HTML文件,就能看到具体是什么情况了。
有什么问题 就在这儿说, 截图贴上来吧
@calmcrime
大侠,我弄个链接给你看比较直观吧
http://www.heredc.com/js/a.htm
给样式2重新指定:
border:0px;
不行吗?

WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.

HTML의 역할은 태그 및 속성을 통해 웹 페이지의 구조와 내용을 정의하는 것입니다. 1. HTML은 읽기 쉽고 이해하기 쉽게하는 태그를 통해 컨텐츠를 구성합니다. 2. 접근성 및 SEO와 같은 시맨틱 태그 등을 사용하십시오. 3. HTML 코드를 최적화하면 웹 페이지로드 속도 및 사용자 경험이 향상 될 수 있습니다.

"Code"는 "Code"BroadlyIncludeLugageslikeJavaScriptandPyThonforFunctureS (htMlisAspecificTypeofCodeFocudecturecturingWebContent)

HTML, CSS 및 JavaScript는 웹 개발의 세 가지 기둥입니다. 1. HTML은 웹 페이지 구조를 정의하고 등과 같은 태그를 사용합니다. 2. CSS는 색상, 글꼴 크기 등과 같은 선택기 및 속성을 사용하여 웹 페이지 스타일을 제어합니다.

HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.

HTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.

anexampleStartingtaginhtmlis, whithbeginsaparagraph.startingtagsareessentialinhtmlastheyinitiate rements, definetheirtypes, andarecrucialforstructurituringwebpages 및 smanstlingthedom.

메뉴에서 점선 분할 효과를 설계하는 방법은 무엇입니까? 메뉴를 설계 할 때는 일반적으로 접시 이름과 가격 사이에 왼쪽과 오른쪽을 정렬하는 것이 어렵지 않지만 점선 또는 중간의 점은 어떻습니까?


핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

MinGW - Windows용 미니멀리스트 GNU
이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

SublimeText3 Linux 새 버전
SublimeText3 Linux 최신 버전

DVWA
DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

Atom Editor Mac 버전 다운로드
가장 인기 있는 오픈 소스 편집기

안전한 시험 브라우저
안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.
