1. дома
  2. Вопрос и ответ
  3. Кнопка переключения в HTML

Кнопка переключения в HTML

2012-05-04 2 views
0

Я хочу использовать кнопку переключения на моем сайте, но он не работает (Таггл)Кнопка переключения в HTML

HTML:

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="style.css" media="screen"> 
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"/> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    function initialize() { 
    var latlng = new google.maps.LatLng(47.583937, 13.963623); 
    var myOptions = { 
     zoom: 7, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), 
     myOptions); 

    } 

</script> 
<script type="text/javascript"> 
$(function(){ 
    $('.slider-button').toggle(function(){ 
     $(this).addClass('on').html('Quizz'); 
    },function(){ 
     $(this).removeClass('on').html('Read'); 
    }); 
}); 

</script> 
</script> 

</head> 

<body onload="initialize()"> 
<header id="site_head"> 
     <div class="header_cont"> 
     <h1><a href="#">mr. hurley</a></h1> 
     </div> 
</header> 

<div id="menu" style="float: left; width:20%; height:100%;"> 
    <ul> 
     <li class="first"><a href="#">Search</a> 

     <div class="slider-frame"> 
      <span class="slider-button">OFF</span> 
     </div> 
     </br> 
     <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></li> 
     <li class="active"><a href="#">Offer</a><p> Placeholder</p></li> 
    </ul> 
</div> 

<div id="map_canvas" style="float: left; width:80%; height:100%"></div> 

    <div id="over_map"> 
    <p>TEst dsfkjsldökjfdslkäfjsdfsdfsdfsdfs</p> 
    </div> 
</body> 


</html>

CSS:

body, div, h1, h2, h3, p, ul, ol, li, img, header, section, aside, footer, button { 
    margin: 0; padding: 0; border: 0; list-style: none; 
} 

a { 
    text-decoration: none; 
    color: #961b25; 
} 

a:hover { 
    color: #6f92a7; 
} 

:focus { 
    outline: 0; 
} 

h1, h2, h3 { 
    font-family: Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif; 
    font-weight: normal; 
} 

h2 { 
    font-size: 22px; 
    line-height: 28px; 
} 

.float { 
     float:left; 
    } 

body { 
    background: #f6f6ee url(images/bck.jpg); 
    font-family : "Trebuchet MS", "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size: 12px; 
    overflow:hidden; 
    } 







header#site_head { 
    background: url(bck_head.jpg); 
    -moz-box-shadow: inset 0px -2px 3px #480508; 
    -khtml-box-shadow: inset 0px -2px 3px #480508;    
    -webkit-box-shadow: inset 0px -2px 3px #480508; 
    box-shadow: inset 0px -2px 3px #480508; 
    border-bottom: 1px solid #fffffb; 
    height: 70px; 
    width: 100%; 
    display: block; 
} 

    .header_cont { 
     width: 960px; 
     margin: 0 auto; 
     padding-top: 15px; 
    } 

    .header_cont h1 { 
     text-indent:-9999px; 
     float: left; 
    } 

    .header_cont h1 a { 
     background: url(logo.png) no-repeat; 
     width: 143px; 
     height: 45px; 
     display: block; 
    } 

    .header_cont h1 a:hover { 
     background-position: 0px -45px; 
    } 

    nav.head_nav { 
     float: right; 
     margin-top: 13px; 
    } 

    nav.head_nav ul li { 
     display: inline; 
     margin: 0px 5px; 
    } 

    nav.head_nav ul li a { 
     color: #f6f6ee; 
     font-size: 12px; 
     font-weight: normal; 
     text-transform: lowercase; 
     padding: 5px 8px; 
    } 

    nav.head_nav ul li.home a { 
     background: #4f1d1e; 
     -moz-border-radius: 10px;  
     -khtml-border-radius: 10px;    
     -webkit-border-radius: 10px; 
     border-radius: 10px; 
    } 

    nav.head_nav ul li a:hover { 
     text-shadow: 1px 1px 1px #2c0306; 
     background: #4f1d1e; 
     -moz-border-radius: 10px; 
     -khtml-border-radius: 10px; 
     -webkit-border-radius: 10px; 
     border-radius: 10px; 
     -moz-box-shadow: inset 0px 0px 2px #2c0306; 
     -khtml-box-shadow: inset 0px 0px 2px #2c0306; 
     -webkit-box-shadow: -1px -1px 2px #2c0306; /*-webkit- inset fix*/ 
     box-shadow: inset 0px 0px 2px #2c0306; 
     color: #f6f6ee; 
    } 

    nav.head_nav ul li.rss, nav.head_nav ul li.twitter { 
     position: relative; 
     left: -355px; 
     margin: 0; 
    } 

    nav.head_nav ul li.rss a { 
     color: #b4676c; 
     border-right: 1px solid #903f43; 
     margin: 0; 
     padding-left: 20px; 
     background: url(images/rss.png) left no-repeat; 
     font-size:10px; 
    } 

    nav.head_nav ul li.twitter a { 
     color: #b4676c; 
     margin-left: 3px; 
     padding-left: 20px; 
     background: url(images/twitter.png) left no-repeat; 
     font-size:10px; 
    } 

    nav.head_nav ul li.rss a:hover, nav.head_nav ul li.twitter a:hover { 
     color: #f6f6ee;   
     -moz-border-radius: 0; 
     -khtml-border-radius: 0; 
     -webkit-border-radius: 0; 
     border-radius: 0; 
     -moz-box-shadow: none; 
     -khtml-box-shadow: none; 
     -webkit-box-shadow: none; 
     box-shadow: none; 
    } 
#map_canvas { height: 80% width:80%} 

#menu { 
     clear:left; 
     float:left; 
     width:20%; 
     background:#B7B7B7; 
     font-family:Trebuchet MS, Helvetica, sans-serif; 
     border-bottom:1px solid #A8A8A8; 
     overflow:scroll; 


    } 

    #over_map { position: absolute; top: 100px; right: 50px; z-index: 99; width: 20%; height:30%; background-color/**/: #000000; 
    background-image/**/: none; 
    opacity: 0.8; 

    filter: alpha(opacity=50); 
    color: #ffffff; 
    font-size: 15px; 
    padding-left: 10px; 
    padding-right: 10px; 
    padding-top: 10px; 
    word-wrap: break-word; 
    } 

.slider-frame { 
    position: relative; 
    display: block; 
    margin: 0 auto; 
    width: 84px; 
    height: 27px; 
    background-color: rgb(246, 249, 251); 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
    -webkit-box-shadow: inset 0px 0px 4px 0 rgba(0, 0, 0, 0.25); 
    -moz-box-shadow: inset 0px 0px 4px 0 rgba(0, 0, 0, 0.25); 
    box-shadow: inset 0px 0px 4px 0 rgba(0, 0, 0, 0.25); 
} 
.slider-button { 
    display: block; 
    width: 43px; 
    height: 27px; 
    line-height: 27px; 
    background: #EDF2F7; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
    -webkit-transition: all 0.25s ease-in-out; 
    -moz-transition: all 0.25s ease-in-out; 
    transition: all 0.25s ease-in-out; 
    color: #000; 
    font-family:sans-serif; 
    font-size:11px; 
    font-weight:bold; 
    text-align: center; 
    cursor: pointer; 
    -webkit-box-shadow: inset 0px 0px 4px 0 rgba(0, 0, 0, 0.25); 
    -moz-box-shadow: inset 0px 0px 4px 0 rgba(0, 0, 0, 0.25); 
    box-shadow: inset 0px 0px 4px 0 rgba(0, 0, 0, 0.25); 
} 
.slider-button.on { 
    margin-left: 40px; 
    background: #EDF2F7; 
}

Я это в качестве примера:

http://jsfiddle.net/vY7SQ/3/

Пожалуйста, помогите

источник

2012-05-04 user547995

+0

Было бы полезно создать пример того, что происходит на вашем сайте, на jsFiddle. –

+5

Что именно не работает? Кажется, работает в вашей Fiddle – mattytommo

+0

Кажется, что работает для меня. – Gabe

ответ

0

Я думаю, вам нужно отделить JQuery, как это:

$(function(){ 
    $('.slider-button').toggle(function(){ 
     $(this).addClass('on'); 
     $(this).html('Quizz'); 
    },function(){ 
     $(this).removeClass('on'); 
     $(this).html('Read'); 
    }); });

Обновлено jsfiddle

Edit: Ну, мне сказали, что я был неправ, но scubafly, кажется, согласны с моим оригинальное предложение.

Я скажу так: Установите функцию переключения на .slider-frame и применить изменения к .slider-button Way более удобным для пользователей.

источник

2012-05-04 15:25:07 daveyfaherty

+1

Это ничего не изменит. Цепочка метода не только совершенно корректна, но и поддерживается в jQuery. –

+0

Моя ошибка! Теперь я знаю. – daveyfaherty

0

Если сценарий jQuery не вызван, попробуйте удалить onload="initialize()" и позвонить initialize() из функции $().

источник

2012-05-04 15:27:03

0

Попробуйте изменить <span class="slider-button"> к <span id="slider-button">, а затем вызвать $('#slider-button').toggle(function(){ вместо $('.slider-button').toggle(function(){ Метод Jquery addClass не заменяет класс, он просто добавляет его.

Не забудьте также изменить свой CSS.

источник

2012-05-04 15:29:10

Смежные вопросы

 Смежные вопросы