1
我有代碼，當我點擊錨標籤然後myContent div顯示和隱藏。爲什麼應用css jquery無法正常工作？
function toggleDiv(divId){
$("#"+divId).toggle();
}
.circle-container {
position: relative;
width: 24em;
height: 24em;
padding: 2.8em; /*= 2em * 1.4 (2em = half the width of an img, 1.4 = sqrt(2))*/
border: dashed 1px;
border-radius: 50%;
margin: 1.75em auto 0;
}
.circle-container a {
overflow: hidden;
position: absolute;
top: 50%; left: 50%;
width: 4em; height: 4em;
margin: -2em; /* 2em = 4em/2 */ /* half the width */
}
.circle-container img { display: block; width: 100%; }
.deg0 { transform: translate(12em); } /* 12em = half the width of the wrapper */
.deg45 { transform: rotate(45deg) translate(12em) rotate(-45deg); }
.deg135 { transform: rotate(135deg) translate(12em) rotate(-135deg); }
.deg180 { transform: translate(-12em); }
.deg225 { transform: rotate(225deg) translate(12em) rotate(-225deg); }
.deg315 { transform: rotate(315deg) translate(12em) rotate(-315deg); }
.deg300{ transform: rotate(280deg) translate(12em) rotate(-280deg); }
/* this is just for showing the angle on hover */
.circle-container a:not(.center):before {
position: absolute;
width: 4em;
color: white;
opacity: 0;
background: rgba(0,0,0,.5);
font: 1.25em/3.45 Courier, monospace;
letter-spacing: 2px;
text-decoration: none;
text-indent: -2em;
text-shadow: 0 0 .1em deeppink;
transition: .7s; /* only works in Firefox */
content: attr(class)'°';
}
.circle-container a:hover:before { opacity: 1; }
/* this is for showing the circle on which the images are placed */
.circle-container:after {
position: absolute;
top: 2.8em; left: 2.8em;
width: 24em; height: 24em;
border: dashed 1px deeppink;
border-radius: 50%;
opacity: .3;
pointer-events: none;
content: '';
}
.circle-container:hover:after{
opacity: 1;
}
.circle-container a:not(.center):after{
position: absolute;
top: 50%; left: 50%;
width: 4px;
height: 4px;
border-radius: 50%;
box-shadow: 0 0 .5em .5em white;
margin: -2px;
background: deeppink;
opacity: .3;
content: '';
}
.circle-container:hover a:after { opacity: 1; }
.circle-container a:hover:after { opacity: .3; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="javascript:toggleDiv('myContent');">+</a>
<div id="myContent" class='circle-container' style="display:none">
<a href='#' class='center'><img src=''></a>
<a href='#' class='deg0'><img src=''></a>
<a href='#' class='deg45'><img src=''></a>
<a href='#' class='deg135'><img src=''></a>
<a href='#' class='deg180'><img src=''></a>
<a href='#' class='deg225'><img src=''></a>
<a href='#' class='deg315'><img src=''></a>
<a href='#' class='deg300'><img src=''></a>
</div>但是，當我給的CSS錨標記，然後顯示隱藏功能不起作用properly.Below是我的代碼
.hr{
display: block;
width: 74px;
height: 34px;
margin: 40px 0px 0px 0px;
background: #3e599a;
text-decoration: none;
width: 110px;
font: 15px/46px"Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
color: #FFFFFF;
position: relative;
position:fixed;
top: 40%;
left: 50%;
}
<a class="hr" href="javascript:toggleDiv('myContent');">+</a>
其餘的都是一樣的。它沒有顯示和錯誤。
你讓我很快樂.thanx一噸。我想詳細瞭解它，可以請參閱一些文檔或文章，以便我能理解這個概念。 – smarttechy