Этот код не запускается и не дает ошибок

-5

Я хочу создать табличное меню. У меня есть пять вкладок, каждый из которых имеет определенный элемент div. Когда я нажимаю на вкладке, например tab1, то DIV элемент с идентификатором tab1 получить содержание класса и других DIV-х удаляются их класс, но это не похоже на работуЭтот код не запускается и не дает ошибок

<script src="js/jquery.js" type="text/javascript"></script> 
<style type="text/css"> 
    body, html, div, ul,li,a {margin:0; padding:0;} 
    body {font-family:arial;font-size:12px;} 
    .clear {clear:both;} 
    a img {border:none;} 
    ul { 
     list-style:none; 
     position:relative; 
     z-index:2; 
     top:1px; 
     display:table; 
     border-left:1px solid #f5ab36; 
     } 
    ul li {float:left;} 
    ul li a { 
     background:#ffd89b; 
     color:#222; 
     display:block; 
     padding:6px 15px; 
     text-decoration:none; 
     border-right:1px solid #f5ab36; 
     border-top:1px solid #f5ab36; 
     border-right:1px solid #f5ab36; 
     } 
    ul li a.selected 
    { 
     border-bottom:1px solid #fff; 
     color:#344385; 
     background:#fff; 
    } 
    h1 { 
      display:block; 
      width:600px; 
      margin:0 auto; 
      padding:20px 0; 
      color:#fff; 
     } 
    #navigation {width:602px; margin: 0 auto;} 
    .content {width:600px; margin:0 auto;height:200px;background:#fff;border:1px solid #f5ab36;z-index:1;text-align:center;padding:10px 0; display:block;} 
    #logo {width:600px; margin:0 auto; padding:10px 0; text-align:right;} 
    .remove 
    { 
     display:none; 
    } 
</style> 

</head> 

<body> 
<h1>Simple tabbed menu</h1> 

<div id="navigation"> 
    <ul> 
     <li ><a href="javascript:void(0);" id="1" class="">Tab 1</a></li> 
     <li><a class="" href="javascript:void(0);" id="2">Tab 2</a></li> 
     <li><a class="" href="javascript:void(0);" id="3">Tab 3</a></li> 
     <li><a class="" href="javascript:void(0);" id="4">Tab 4</a></li> 
     <li><a class="selected" href="javascript:void(0);" id="5">Tab 5</a></li> 
    </ul> 
    <div class="clear"></div> 
</div> 
<div id="remove1"> 
    <div id="tab1" class=""> 
    pannel doesn't always shows everythings 
    </div> 
    <div id="tab2" class=""> 
    this is not a favorit glass 
    </div> 
    <div id="tab3" class="">Oh my god we don't have such strong idea</div> 
    <div id="tab4" class="">my favorit pannel is hear</div> 
    <div id="tab5" class="">Do not talk too much</div>  
</div> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('#remove1 div').addClass('remove'); 
     $('#remove1 div').removeClass('content'); 
     $('#navigation ul a').click(function(){ 
      $('#navigation ul a').removeClass('selected'); 
       $(this).addClass('selected'); 


      if($(this).attr('id')==1) 
      { 

     $('#remove1 div').addClass('remove'); 
       $('#tab1').addClass('content'); 

      } 
      else if($(this).attr('id')==2) 
      { 

       $('#remove1 div').addClass('remove'); 
       $('#tab2').addClass('content');    

      } 
      else if($(this).attr('id')==3) 
      { 

       $('#remove1 div').addClass('remove'); 
       $('#tab3').addClass('content'); 


      } 
      else if($(this).attr('id')==4)      
      { 
       $('#remove1 div').addClass('remove'); 
       $('#remove1 div').removeClass('content'); 

       $('#tab4').addClass('content'); 

      } 
      else if($(this).attr('id')==5)      
      { 

       $('#remove1 div').addClass('remove'); 
       $('#tab5').addClass('content'); 
      } 
     }); 


    }); 
</script> 



</body></html>

, когда я нажимаю на элемент, как ожидается, скроет весь элемент div и покажет конкретный div, который он ничего не делает.

источник

2013-06-23 Sharareh Rahimi

И проблема в том, что проблема? –

Пожалуйста, используйте внешнюю таблицу стилей –

Huh? .............. – Oleksiy

Вы забыли удалить класс remove, чтобы он оставался скрытым. Нет необходимости во всех операторах if, один из вариантов - добавить data-tabid к вашим якорям и использовать это как идентификатор для отображения div.

<!DOCTYPE html> 
<html> 
<head> 
<script src="jquery-1.9.0.js"></script> 
<title>test</title> 
<style type="text/css"> 
    body, html, div, ul,li,a {margin:0; padding:0;} 
    body {font-family:arial;font-size:12px;} 
    .clear {clear:both;} 
    a img {border:none;} 
    ul { 
     list-style:none; 
     position:relative; 
     z-index:2; 
     top:1px; 
     display:table; 
     border-left:1px solid #f5ab36; 
     } 
    ul li {float:left;} 
    ul li a { 
     background:#ffd89b; 
     color:#222; 
     display:block; 
     padding:6px 15px; 
     text-decoration:none; 
     border-right:1px solid #f5ab36; 
     border-top:1px solid #f5ab36; 
     border-right:1px solid #f5ab36; 
     } 
    ul li a.selected 
    { 
     border-bottom:1px solid #fff; 
     color:#344385; 
     background:#fff; 
    } 
    h1 { 
      display:block; 
      width:600px; 
      margin:0 auto; 
      padding:20px 0; 
      color:#fff; 
     } 
    #navigation {width:602px; margin: 0 auto;} 
    .content {width:600px; margin:0 auto;height:200px;background:#fff;border:1px solid #f5ab36;z-index:1;text-align:center;padding:10px 0; display:block;} 
    #logo {width:600px; margin:0 auto; padding:10px 0; text-align:right;} 
    .remove 
    { 
     display:none; 
    } 
</style> 

</head> 

<body> 
<h1>Simple tabbed menu</h1> 

<div id="navigation"> 
    <ul> 
     <li ><a href="javascript:void(0);" id="1" data-tabid="tab1" class="">Tab 1</a></li> 
     <li><a class="" href="javascript:void(0);" id="2" data-tabid="tab2">Tab 2</a></li> 
     <li><a class="" href="javascript:void(0);" id="3" data-tabid="tab3">Tab 3</a></li> 
     <li><a class="" href="javascript:void(0);" id="4" data-tabid="tab4">Tab 4</a></li> 
     <li><a class="selected" href="javascript:void(0);" id="5" data-tabid="tab5">Tab 5</a></li> 
    </ul> 
    <div class="clear"></div> 
</div> 
<div id="remove1"> 
    <div id="tab1" class=""> 
    pannel doesn't always shows everythings 
    </div> 
    <div id="tab2" class=""> 
    this is not a favorit glass 
    </div> 
    <div id="tab3" class="">Oh my god we don't have such strong idea</div> 
    <div id="tab4" class="">my favorit pannel is hear</div> 
    <div id="tab5" class="">Do not talk too much</div>  
</div> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#remove1 div').addClass('remove'); 
     $('#remove1 div').removeClass('content'); 
     $("#tab5").addClass('content'); 
     $('#tab5').removeClass('remove'); 

     $('#navigation ul a').click(function() { 
      var tabID = this.getAttribute("data-tabid") 
       .toString(); 
      $('#navigation ul a').removeClass('selected'); 
      $(this).addClass('selected'); 
      $('#remove1 div').addClass('remove'); 
      $('#' + tabID).addClass('content'); 
      $('#' + tabID).removeClass('remove'); 
     }); 


    }); 
</script> 



</body></html>

источник

2013-06-23 13:58:20 HMR

Вы всегда добавляете класс remove, но никогда не удаляете его. Класс элемента - это набор; когда вы добавляете что-то снова, это не имеет приоритета над остальными.

Вы можете скопировать и вставить пару removeClass эс везде (в том числе и у вас есть для # 4, но, кажется, забыли, и везде), или вы могли бы использовать конкатенацию, чтобы найти правильный элемент:

var $links = $('#navigation a'); 
var $tabs = $('#remove1 > div'); 

$links.click(function(e) { 
    $links.removeClass('selected'); 
    $(this).addClass('selected'); 

    $tabs.removeClass('content').addClass('remove'); 
    $('#tab' + this.id).addClass('content').removeClass('remove'); 
});

Затем добавьте внешнюю таблицу стилей и ссылку на нее с помощью элемента <link>. После этого сделайте display: none; по умолчанию и вытащите его .addClass('remove') и .removeClass('remove'). javascript:void(0) - это действительно плохая практика; вынимает атрибут id (который вы НЕПРАВИЛЬНЫЕ, он должен быть data-id, если что-нибудь) и ссылка на фактическую закладку:

<li><a href="#tab2">Tab 2</a></li>

Затем остановить связь от соблюдаются в конце вашего слушателя событий:

e.preventDefault();

и использовать весь href атрибут вместо этого не очень хорошей конкатенации:

$(this.getAttribute('href')).addClass('content');

Наконец, вы должны полностью drop jQuery and try plain old JavaScript, учитывая приличный браузер.

источник

2013-06-23 13:58:06 Ryan

Этот код не запускается и не дает ошибок

ответ

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