<p id="wrapper">
  <!-- 这里是li-->
   <ul id="nav-li">
      <li>1</li>
      <li>2</li>
      <li>3</li>
   </ul>
  <!-- 这里是对应的p-->
   <p id="content-wrpper">
      <p>1内容</p>
      <p>2内容</p>
      <p>3内容</p>
   </p>
</p>

js代码

window.onload = function(){
            var navLi = document.getElementById("nav-li");
            var navLiList = navLi.getElementsByTagName("li");
            var contentp = document.getElementById("content-wrpper");
            var contentpList = contentp.getElementsByTagName("p");
            var index;

            for(var i=0; i<navLiList.length; i++){
                 navLiList[i].index = i;
                }
        //采用事件代理
        navLi.addEventListener("mouseover",function(e){

           if(e.target.nodeName.toLowerCase() === "li"){
               //添加index索引
                  for(var j=0; j< contentpList.length; j++){
                          contentpList[j].style.display = "none";
                   }

              contentpList[e.target.index].style.display = "block";
            }
         
        },false);

    }

js写的不太好，还有其他可以优化的。今天就先到这里

对li与p做一下对应，比如索引对应，第i个li对应第i个p。

var liIndex=$('li').index();
    $('p').eq(liIndex).show();

当然，也可以是属性上的对应。

不太明白你的意思，或许是跟楼上一个道理 取到li的对应索引，然后用到p的对应索引里
或许你把p都写成li的子元素了 那么只要用jquery里面的hover就好了

$("li").mouseover(function() {
    $("p").eq($(this).index()).show().siblings().hide();
});

思路：
1.获取当前mouseover的li的索引值
2.让索引值一样的p显示其他的（siblings）隐藏