1. 首頁
  2. 問答
  3. 正確顯示鏈接

正確顯示鏈接

2014-02-17 122 views
0

onPage負載，我有一組超鏈接，我試圖正確顯示品牌導航div內。 鏈接溢出品牌導航div。我已經嘗試製作品牌導航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

來源

2014-02-17 Volterony

+0

可以創建output..http的小提琴：//jsfiddle.net/ –

+0

http://jsfiddle.net/579Sa/ – Volterony

回答

0

以下內容添加到您的品牌資產淨值的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(); 
}*/

來源

2014-02-17 11:52:09 kcak11

+0

這絕對有效。鏈接現在包含在div中。然而，他們都保持在同一行，不要垂直填充div？正在考慮一個4列表 – Volterony

+0

正如Nick R所評論的那樣，請創建一個輸出的小提琴，以便可以做更多的事情。 – kcak11

+0

我可以做的JS小提琴，但只是一個新手堆棧溢出，所以我把PHP數組？ – Volterony

相關問題

 相關問題