Итак, используйте javascript для реализации метода attr, который в jquery?реализовать подменю?

Question

<style type="text/css">
.item{list-style:none;width:200px;line-height:30px;border:1px solid #324}
#item-1{}
#item-2{}
#item-3{}
.subcontents{}
.subcontents .subnames{width:400px;height:300px;border:1px dotted;#324;position:absolute;left: 250px;}
#subcontents-1{display:none;top:20px;}
#subcontents-2{display:none;top:50px;}
#subcontents-3{display:none;top:80px;}
    </style>


<ul>
    <li id="item-1" class="item">internet</li>
    <li id="item-2" class="item">center</li>
    <li id="item-3" class="item">blog</li>
</ul>
<div class="subcontents">
    <div id="subcontents-1" class="subnames"></div>
    <div id="subcontents-2" class="subnames"></div>
    <div id="subcontents-3" class="subnames"></div>
</div>


var item = document.getElementsByClassName('item'); //return Array
var itemid = [],idnumber = [];
for(var i = 0,len = item.length;i < len; i++){
    var itemid[i] = item[i].attr('id'); // here has some question
    var idnumber[i] = itemid[i].substr(itemid.indexOf('-') + 1);    
}



var handler = function () {



    function showdiv(idnumber) {
        var subnavcontent = "subcontents-" + idnumber;
        var getshowid = document.getElementByid('subnavcontent');
        getshowid.style.display = 'block';
    }

};


function addEvent(obj, evt, fn) {
    if (obj.addEventListener) // W3C
        obj.addEventListener(evt, fn, false);
    else if (obj.attachEvent) // Microsoft
        obj.attachEvent('on' + evt, fn);
}
addEvent(item, "mouseover", handler);

Я имею в виду, что когда мышь наведет курсор мыши на

<li id="item-#" class="item">internet</li>

, отобразится <div id="subcontents-#" class="subnames"></div>.Однако необходимо использовать код (реализацию метода), как указано выше.

1, захватить событие mouseover объектом li;

2, использовать className для получения идентификатора объекта;

3, строка перехвата ID (соответствующий номер);

4, сгенерированная комбинацией строки нового идентификатора и обработкой

знаете ли вы, что мне сказать, мойАнглийский это плохо.спасибо.

если вы не знаете, что сказать:

просто используйте html для реализации меню навигации, но используйте меньше кода для его реализации.

---

JQuery код был сделан это.

но Javascript код ??

Answer 1

С jQuery вы могли бы сделать это немного проще (сейчас протестировано):

<ul id="menu">
    <li data-number="1" class="item">internet</li>
    <li data-number="2" class="item">center</li>
    <li data-number="3" class="item">blog</li>
</ul>

<div class="subcontents">
    <div id="subcontents-1" class="subnames">sub 1</div>
    <div id="subcontents-2" class="subnames">sub 2</div>
    <div id="subcontents-3" class="subnames">sub 3</div>
</div>

<script type="text/javascript">
  $(function() { 
      $('#menu > li').mouseenter(function() {
          var id = 'subcontents-' + $(this).attr('data-number');

          // Display the new subcontents
          $('#' + id).css('display', 'block');
      });

      $('#menu > li').mouseleave(function() {
          var id = 'subcontents-' + $(this).attr('data-number');

          // Hide the old subcontents
          $('#' + id).css('display', 'none');
      });
  });
</script>

Извините за плохую первую версию. Я не должен публиковать непроверенный код.

Если вы не хотите использовать атрибуты номера данных, замените $(this).attr('data-number') на this.id.split("-")[1].