正确显示链接

时间：2014-02-17 11:48:03

标签： javascript php html css

onPage加载，我有一组超链接，我试图正确显示在品牌导航div中。 链接溢出了品牌nav div。我试过制作brand-nav div显示块，但它不起作用。也有兴趣我如何在一个包含4列和足够行的表中显示链接以容纳所有链接？

<?php
$brand = array (
"nike" => array (
            array('logo'=>'images/nike.png', 'description' =>'some nike text'),
            array('logo'=>'images/nike.png', 'description' =>'some nike text'),
            array('logo'=>'images/nike.png', 'description' =>'some nike text')),
"puma" => array(
            array('logo'=>'images/puma.png', 'description' =>'some puma text'),
            array('logo'=>'images/puma.png', 'description' =>'some puma text'),
            array('logo'=>'images/puma.png', 'description' =>'some puma text')),
"addidas" => array(
            array('logo'=>'images/addidas.png', 'description'=>'some addidas text1'),
            array('logo'=>'images/addidas.png', 'description'=>'some addidas text2'),
            array('logo'=>'images/addidas.png', 'description'=>'some addidas text3')),
"Asics" => array(
            array('logo'=>'images/Asics.png', 'description'=>'some Asics text'),
            array('logo'=>'images/Asics.png', 'description'=>'some Asics text'),
            array('logo'=>'images/Asics.png', 'description'=>'some Asics text')),
"nike" => array (
            array('logo'=>'images/nike.png', 'description' =>'some nike text'),
            array('logo'=>'images/nike.png', 'description' =>'some nike text'),
            array('logo'=>'images/nike.png', 'description' =>'some nike text')),
"test1" => array(
            array('logo'=>'images/puma.png', 'description' =>'some puma text'),
            array('logo'=>'images/puma.png', 'description' =>'some puma text'),
            array('logo'=>'images/puma.png', 'description' =>'some puma text')),
"test2" => array(
            array('logo'=>'images/addidas.png', 'description'=>'some addidas text1'),
            array('logo'=>'images/addidas.png', 'description'=>'some addidas text2'),
            array('logo'=>'images/addidas.png', 'description'=>'some addidas text3')),
"test3" => array(
            array('logo'=>'images/Asics.png', 'description'=>'some Asics text'),
            array('logo'=>'images/Asics.png', 'description'=>'some Asics text'),
            array('logo'=>'images/Asics.png', 'description'=>'some Asics text')),
 "test4" => array(
            array('logo'=>'images/puma.png', 'description' =>'some puma text'),
            array('logo'=>'images/puma.png', 'description' =>'some puma text'),
            array('logo'=>'images/puma.png', 'description' =>'some puma text')),
 "test5" => array(
            array('logo'=>'images/addidas.png', 'description'=>'some addidas text1'),
            array('logo'=>'images/addidas.png', 'description'=>'some addidas text2'),
            array('logo'=>'images/addidas.png', 'description'=>'some addidas text3')),
 "test6" => array(
            array('logo'=>'images/Asics.png', 'description'=>'some Asics text'),
            array('logo'=>'images/Asics.png', 'description'=>'some Asics text'),
            array('logo'=>'images/Asics.png', 'description'=>'some Asics text')),
 "test7" => array(
            array('logo'=>'images/Asics.png', 'description'=>'some Asics text'),
            array('logo'=>'images/Asics.png', 'description'=>'some Asics text'),
            array('logo'=>'images/Asics.png', 'description'=>'some Asics text')),
 "test8" => array(
            array('logo'=>'images/puma.png', 'description' =>'some puma text'),
            array('logo'=>'images/puma.png', 'description' =>'some puma text'),
            array('logo'=>'images/puma.png', 'description' =>'some puma text')),
 "test9" => array(
            array('logo'=>'images/addidas.png', 'description'=>'some addidas text1'),
            array('logo'=>'images/addidas.png', 'description'=>'some addidas text2'),
            array('logo'=>'images/addidas.png', 'description'=>'some addidas text3')),
 "test10" => array(
            array('logo'=>'images/Asics.png', 'description'=>'some Asics text'),
            array('logo'=>'images/Asics.png', 'description'=>'some Asics text'),
            array('logo'=>'images/Asics.png', 'description'=>'some Asics text')),
 "Qicksilver" => array(
            array('logo'=>'images/Qicksilver.png', 'description'=>'some Qicksilver text'),
            array('logo'=>'images/Qicksilver.png', 'description'=>'some Qicksilver text'),
            array('logo'=>'images/Qicksilver.png', 'description'=>'some Qicksilver text')),
 );
?>

CSS 

 <style type="text/css">
 a {
margin-left:10px;

 }
 #brand-content {
margin-top:50px;
border:solid 1px #000;
padding:10px;
display:none;
width: 50%;
 }
 #brand-nav  {
border: 1px solid #000;
width: 500px;
height: 200px;
display: block;
 }
 </style>

脚本： 

 <script>

 var brand = <?php echo json_encode($brand) ?>; // json_encode($brand) is equivalent to the following:     {"nike":[{"logo":"images\/nike.png","description":"some nike text"},{"logo":"images\/nike.png","description":"some nike text"},{"logo":"images\/nike.png","description":"some nike text"}],"puma":[{"logo":"images\/puma.png","description":"some puma text"},{"logo":"images\/puma.png","description":"some puma text"},{"logo":"images\/puma.png","description":"some puma text"}],"addidas":[{"logo":"images\/addidas.png","description":"some addidas text"},{"logo":"images\/addidas.png","description":"some addidas text"},{"logo":"images\/addidas.png","description":"some addidas text"}],"Asics":[{"logo":"images\/Asics.png","description":"some Asics text"},{"logo":"images\/Asics.png","description":"some Asics text"},{"logo":"images\/Asics.png","description":"some Asics text"}],"Qicksilver":[{"logo":"images\/Qicksilver.png","description":"some Qicksilver text"},{"logo":"images\/Qicksilver.png","description":"some Qicksilver text"},{"logo":"images\/Qicksilver.png","description":"some Qicksilver text"}]}

 function readyLinks()
   {
   var company, link;
   for (company in brand)
     {
     link = document.createElement("a");
     link.innerHTML = company;
     link.LogoDescription_Arr=brand[company];
    link.onclick = function()
    {
        var container=document.getElementById("brand-content"); 
        var LogoDescription_Arr=this.LogoDescription_Arr, i, l =LogoDescription_Arr.length, item;
        var outPutHTML="";          
        for (i=0;i<l;i++)
    {
    item=LogoDescription_Arr[i];
    outPutHTML+= "<img src=\""+item.logo+"\"/>" +  item.description + "<br>";
   }
  container.innerHTML=outPutHTML;          
  container.style.display = "block";
  return false;
     }
     document.getElementById("brand-nav").appendChild(link);
    }
  }
 window.onload = function() {
 readyLinks();
}

</script>

 <!-- body -->

 <div id="brand-nav"></div>

 <div id="brand-content"></div>

 </script>

Volterony

1 个答案:

答案 0 :(得分：0)

将以下内容添加到您的brand-nav css 

#brand-nav  {
border: 1px solid #000;
width: 500px;
height: 200px;
display: block;
overflow:hidden;
}

更新了以下JavaScript代码：

var brand = {"nike":[{"logo":"images\/nike.png","description":"some nike text"},{"logo":"images\/nike.png","description":"some nike text"},{"logo":"images\/nike.png","description":"some nike text"}],"puma":[{"logo":"images\/puma.png","description":"some puma text"},{"logo":"images\/puma.png","description":"some puma text"},{"logo":"images\/puma.png","description":"some puma text"}],"addidas":[{"logo":"images\/addidas.png","description":"some addidas text1"},{"logo":"images\/addidas.png","description":"some addidas text2"},{"logo":"images\/addidas.png","description":"some addidas text3"}],"Asics":[{"logo":"images\/Asics.png","description":"some Asics text"},{"logo":"images\/Asics.png","description":"some Asics text"},{"logo":"images\/Asics.png","description":"some Asics text"}],"test1":[{"logo":"images\/puma.png","description":"some puma text"},{"logo":"images\/puma.png","description":"some puma text"},{"logo":"images\/puma.png","description":"some puma text"}],"test2":[{"logo":"images\/addidas.png","description":"some addidas text1"},{"logo":"images\/addidas.png","description":"some addidas text2"},{"logo":"images\/addidas.png","description":"some addidas text3"}],"test3":[{"logo":"images\/Asics.png","description":"some Asics text"},{"logo":"images\/Asics.png","description":"some Asics text"},{"logo":"images\/Asics.png","description":"some Asics text"}],"test4":[{"logo":"images\/puma.png","description":"some puma text"},{"logo":"images\/puma.png","description":"some puma text"},{"logo":"images\/puma.png","description":"some puma text"}],"test5":[{"logo":"images\/addidas.png","description":"some addidas text1"},{"logo":"images\/addidas.png","description":"some addidas text2"},{"logo":"images\/addidas.png","description":"some addidas text3"}],"test6":[{"logo":"images\/Asics.png","description":"some Asics text"},{"logo":"images\/Asics.png","description":"some Asics text"},{"logo":"images\/Asics.png","description":"some Asics text"}],"test7":[{"logo":"images\/Asics.png","description":"some Asics text"},{"logo":"images\/Asics.png","description":"some Asics text"},{"logo":"images\/Asics.png","description":"some Asics text"}],"test8":[{"logo":"images\/puma.png","description":"some puma text"},{"logo":"images\/puma.png","description":"some puma text"},{"logo":"images\/puma.png","description":"some puma text"}],"test9":[{"logo":"images\/addidas.png","description":"some addidas text1"},{"logo":"images\/addidas.png","description":"some addidas text2"},{"logo":"images\/addidas.png","description":"some addidas text3"}],"test10":[{"logo":"images\/Asics.png","description":"some Asics text"},{"logo":"images\/Asics.png","description":"some Asics text"},{"logo":"images\/Asics.png","description":"some Asics text"}],"Qicksilver":[{"logo":"images\/Qicksilver.png","description":"some Qicksilver text"},{"logo":"images\/Qicksilver.png","description":"some Qicksilver text"},{"logo":"images\/Qicksilver.png","description":"some Qicksilver text"}]}; 

function readyLinks()
  {
  var company, link;
  for (company in brand)
    {
        br=document.createElement("br");
    link = document.createElement("a");
    link.innerHTML = company;
    link.LogoDescription_Arr=brand[company];
        link.onclick = function()
        {
            var container=document.getElementById("brand-content"); 
            var LogoDescription_Arr=this.LogoDescription_Arr, i, l =LogoDescription_Arr.length, item;
            var outPutHTML="";          
            for (i=0;i<l;i++)
        {
        item=LogoDescription_Arr[i];
        outPutHTML+= "<img src=\""+item.logo+"\"/>" +  item.description + "<br>";
     }
      container.innerHTML=outPutHTML;          
      container.style.display = "block";
      return false;
      }
    document.getElementById("brand-nav").appendChild(link);
    document.getElementById("brand-nav").appendChild(br);
    }
  }
  readyLinks();
/*window.onload = function() {
readyLinks();
}*/
相关问题
最新问题