私は、下の例でli要素をクリックしたときに関数をトリガーしようとしていますが、onclickを使用する以外に多くの運がない - つまり最初のli（値1）をクリックすると理想的です値 "1" が渡された関数を呼び出す。リッククリック時のトリガーイベント
..
<a href="#" class="path-nav-close"></a>
<ul id='uItem'>
<li><a href="#" class="launch" >1</a></li>
<li><a href="#" class="launch" onclick="alert('2')">2</a></li>
...
https://jsfiddle.net/wL8vpuqt/5/
。
あなただけevent.preventDefault()を使用してデフォルトの動作を防ぐためにしました：
$(document).ready(function() {
$('ul#uItem li').click(function(event) {
event.preventDefault();
alert($(this).text());
});
});
は、この情報がお役に立てば幸いです。
$(document).ready(function() {
$('ul#uItem li').click(function(e) {
e.preventDefault();
alert($(this).text());
});
});/* line 81, ../sass/menu.scss */
.path-nav {
-moz-transform: translateZ(0);
-webkit-transform: translateZ(0);
-o-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
position: fixed;
}
/* line 87, ../sass/menu.scss */
.path-nav.path-nav-bottom-left {
bottom: 30%;
left: 20%;
position: absolute;
}
/* line 93, ../sass/menu.scss */
.path-nav.path-nav-top-right {
top: 26px;
right: 26px;
}
/* line 100, ../sass/menu.scss */
.path-nav a {
position: relative;
z-index: 1;
display: block;
width: 40px;
height: 40px;
line-height: 40px;
border: 6px solid white;
background: #44403d;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
-khtml-border-radius: 50%;
border-radius: 50%;
color: #fff;
text-align: center;
font-weight: bold;
font-size: 16px;
font-family: sans-serif;
text-decoration: none;
-moz-box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25), inset 0 0 2px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25), inset 0 0 2px rgba(0, 0, 0, 0.8);
-o-box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25), inset 0 0 2px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25), inset 0 0 2px rgba(0, 0, 0, 0.8);
}
/* line 127, ../sass/menu.scss */
.path-nav.active a {
-moz-box-shadow: 0 0.2em 1em 2px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(0, 0, 0, 0.25), inset 0 0 2px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0 0.2em 1em 2px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(0, 0, 0, 0.25), inset 0 0 2px rgba(0, 0, 0, 0.8);
-o-box-shadow: 0 0.2em 1em 2px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(0, 0, 0, 0.25), inset 0 0 2px rgba(0, 0, 0, 0.8);
box-shadow: 0 0.2em 1em 2px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(0, 0, 0, 0.25), inset 0 0 2px rgba(0, 0, 0, 0.8);
}
/* line 137, ../sass/menu.scss */
.path-nav ul {
position: absolute;
z-index: 0;
top: 8.5px;
left: 8.5px;
margin: 0;
padding: 0;
}
/* line 147, ../sass/menu.scss */
.path-nav li {
position: absolute;
z-index: 0;
display: block;
top: 0;
left: 0;
}
/* line 155, ../sass/menu.scss */
.path-nav li:nth-child(1) {
-moz-transition-property: all;
-webkit-transition-property: all;
-o-transition-property: all;
transition-property: all;
-moz-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-moz-transition-delay: 0.175s;
-webkit-transition-delay: 0.175s;
-o-transition-delay: 0.175s;
transition-delay: 0.175s;
}
/* line 155, ../sass/menu.scss */
.path-nav li:nth-child(2) {
-moz-transition-property: all;
-webkit-transition-property: all;
-o-transition-property: all;
transition-property: all;
-moz-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-moz-transition-delay: 0.14s;
-webkit-transition-delay: 0.14s;
-o-transition-delay: 0.14s;
transition-delay: 0.14s;
}
/* line 155, ../sass/menu.scss */
.path-nav li:nth-child(3) {
-moz-transition-property: all;
-webkit-transition-property: all;
-o-transition-property: all;
transition-property: all;
-moz-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-moz-transition-delay: 0.105s;
-webkit-transition-delay: 0.105s;
-o-transition-delay: 0.105s;
transition-delay: 0.105s;
}
/* line 155, ../sass/menu.scss */
.path-nav li:nth-child(4) {
-moz-transition-property: all;
-webkit-transition-property: all;
-o-transition-property: all;
transition-property: all;
-moz-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-moz-transition-delay: 0.07s;
-webkit-transition-delay: 0.07s;
-o-transition-delay: 0.07s;
transition-delay: 0.07s;
}
/* line 155, ../sass/menu.scss */
.path-nav li:nth-child(5) {
-moz-transition-property: all;
-webkit-transition-property: all;
-o-transition-property: all;
transition-property: all;
-moz-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-moz-transition-delay: 0.035s;
-webkit-transition-delay: 0.035s;
-o-transition-delay: 0.035s;
transition-delay: 0.035s;
}
/* line 155, ../sass/menu.scss */
.path-nav li:nth-child(6) {
-moz-transition-property: all;
-webkit-transition-property: all;
-o-transition-property: all;
transition-property: all;
-moz-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-moz-transition-delay: 0s;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
/* line 169, ../sass/menu.scss */
.path-nav:target li {
-moz-transform: rotate(1800deg);
-webkit-transform: rotate(1800deg);
-o-transform: rotate(1800deg);
-ms-transform: rotate(1800deg);
transform: rotate(1800deg);
}
/* line 174, ../sass/menu.scss */
.path-nav:target .cross {
-moz-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* line 73, ../sass/menu.scss */
.path-nav.path-nav-bottom-left:target li:nth-child(1) {
top: -100px;
left: 80px;
}
/* line 73, ../sass/menu.scss */
.path-nav.path-nav-bottom-left:target li:nth-child(2) {
top: -100px;
left: 150px;
}
/* line 73, ../sass/menu.scss */
.path-nav.path-nav-bottom-left:target li:nth-child(3) {
top: -100px;
left: 220px;
}
/* line 73, ../sass/menu.scss */
.path-nav.path-nav-bottom-left:target li:nth-child(4) {
top: -30px;
left: 80px;
}
/* line 73, ../sass/menu.scss */
.path-nav.path-nav-bottom-left:target li:nth-child(5) {
top: -30px;
left: 150px;
}
/* line 73, ../sass/menu.scss */
.path-nav.path-nav-bottom-left:target li:nth-child(6) {
top: -30px;
left: 220px;
}
/* line 73, ../sass/menu.scss */
.path-nav.path-nav-bottom-left:target li:nth-child(7) {
top: 40px;
left: 80px;
}
/* line 73, ../sass/menu.scss */
.path-nav.path-nav-bottom-left:target li:nth-child(8) {
top: 40px;
left: 150px;
}
/* line 73, ../sass/menu.scss */
.path-nav.path-nav-bottom-left:target li:nth-child(9) {
top: 40px;
left: 220px;
}
/* line 73, ../sass/menu.scss */
.path-nav.path-nav-bottom-left:target li:nth-child(10) {
top: 110px;
left: 150px;
}
/* line 73, ../sass/menu.scss */
.path-nav.path-nav-top-right:target li:nth-child(1) {
top: 265px;
left: 0px;
}
/* line 73, ../sass/menu.scss */
.path-nav.path-nav-top-right:target li:nth-child(2) {
top: 252px;
left: -82px;
}
/* line 73, ../sass/menu.scss */
.path-nav.path-nav-top-right:target li:nth-child(3) {
top: 214px;
left: -156px;
}
/* line 73, ../sass/menu.scss */
.path-nav.path-nav-top-right:target li:nth-child(4) {
top: 156px;
left: -214px;
}
/* line 73, ../sass/menu.scss */
.path-nav.path-nav-top-right:target li:nth-child(5) {
top: 82px;
left: -252px;
}
/* line 200, ../sass/menu.scss */
.path-nav .path-nav-expander,
.path-nav .path-nav-close {
z-index: 3;
width: 68px;
height: 68px;
line-height: 68px;
}
/* line 208, ../sass/menu.scss */
.path-nav .path-nav-close {
z-index: 2;
position: absolute;
top: 0;
left: 0;
background: none;
outline: red;
-moz-box-shadow: 0;
-webkit-box-shadow: 0;
-o-box-shadow: 0;
box-shadow: 0;
}
/* line 222, ../sass/menu.scss */
.path-nav:target .path-nav-expander {
z-index: 1;
}
/* line 228, ../sass/menu.scss */
.path-nav .path-nav-expander {
position: relative;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0fd2ab), color-stop(50%, #0fd2ab), color-stop(50%, #0fd2ab));
background: -webkit-linear-gradient(#0fd2ab, #0fd2ab 50%, #0fd2ab 50%);
background: -moz-linear-gradient(#0fd2ab, #0fd2ab 50%, #0fd2ab 50%);
background: -o-linear-gradient(#0fd2ab, #0fd2ab 50%, #0fd2ab 50%);
background: -ms-linear-gradient(#0fd2ab, #0fd2ab 50%, #0fd2ab 50%);
background: linear-gradient(#0fd2ab, #0fd2ab 50%, #0fd2ab 50%);
-moz-box-shadow: 0 0.2em 1em 2px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(0, 0, 0, 0.25), inset 0 2px 2px rgba(255, 255, 255, 0.5);
-webkit-box-shadow: 0 0.2em 1em 2px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(0, 0, 0, 0.25), inset 0 2px 2px rgba(255, 255, 255, 0.5);
-o-box-shadow: 0 0.2em 1em 2px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(0, 0, 0, 0.25), inset 0 2px 2px rgba(255, 255, 255, 0.5);
box-shadow: 0 0.2em 1em 2px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(0, 0, 0, 0.25), inset 0 2px 2px rgba(255, 255, 255, 0.5);
}
/* line 241, ../sass/menu.scss */
.path-nav .path-nav-expander .cross {
position: relative;
width: 68px;
height: 68px;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
/* line 249, ../sass/menu.scss */
.path-nav .path-nav-expander .cross .cross-h,
.path-nav .path-nav-expander .cross .cross-v {
position: absolute;
top: 50%;
left: 50%;
background: #fff;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-o-border-radius: 2px;
-ms-border-radius: 2px;
-khtml-border-radius: 2px;
border-radius: 2px;
}
/* line 259, ../sass/menu.scss */
.path-nav .path-nav-expander .cross .cross-h {
width: 8px;
margin-left: -4px;
height: 40px;
margin-top: -20px;
}
/* line 267, ../sass/menu.scss */
.path-nav .path-nav-expander .cross .cross-v {
width: 40px;
margin-left: -20px;
height: 8px;
margin-top: -4px;
}
/* line 277, ../sass/menu.scss */
.path-nav-top-right .path-nav-expander {
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #143da5), color-stop(50%, #133a9c), color-stop(50%, #103081));
background: -webkit-linear-gradient(#143da5, #133a9c 50%, #103081 50%);
background: -moz-linear-gradient(#143da5, #133a9c 50%, #103081 50%);
background: -o-linear-gradient(#143da5, #133a9c 50%, #103081 50%);
background: -ms-linear-gradient(#143da5, #133a9c 50%, #103081 50%);
background: linear-gradient(#143da5, #133a9c 50%, #103081 50%);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="menu" class="path-nav path-nav-bottom-left">
<a href="#menu" class="path-nav-expander">
<div class="cross">
<div class="cross-h"></div>
<div class="cross-v"></div>
</div>
</a>
<a href="#" class="path-nav-close"></a>
<ul id='uItem'>
<li><a href="#" class="launch" >1</a></li>
<li><a href="#" class="launch">2</a></li>
<li><a href="#" class="launch">3</a></li>
<li><a href="#" class="launch">4</a></li>
<li><a href="#" class="launch">5</a></li>
<li><a href="#" class="launch">6</a></li>
<li><a href="#" class="launch">7</a></li>
<li><a href="#" class="launch">8</a></li>
<li><a href="#" class="launch">9</a></li>
<li><a href="#" class="launch" o>10</a></li>
</ul>
</nav>
https://jsfiddle.net/wL8vpuqt/6/ –