Javascript 正确显示链接_Javascript_Php_Html_Css

Javascript 正确显示链接

javascript php html css

Javascript 正确显示链接,javascript,php,html,css,Javascript,Php,Html,Css,在页面加载时，我有一组超链接，我正试图在brand nav div中正确显示这些超链接。链接溢出了品牌导航分区。我曾尝试制作品牌导航分区显示块，但不起作用。我还想知道如何在一个有4列和足够行的表中显示链接，以容纳所有链接 <?php $brand = array ( "nike" => array ( array('logo'=>'images/nike.png', 'description' =>'some nike text'),

在页面加载时，我有一组超链接，我正试图在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

脚本：

Volterony

将以下内容添加到您的品牌导航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();
}*/

你们能不能创造一个输出的小提琴..这绝对有效。链接现在包含在div中。但是它们都保持在同一行上，并且不垂直填充div？我在想Nick R评论的4列表格，请创建一个输出的提琴，这样可以做更多。我可以做JS提琴，但只是一个堆栈溢出的新手，那么我应该把php数组放在哪里？在提琴中，只需复制粘贴页面的结果标记，这将有助于人们了解你在品牌导航部门想要实现的目标。我检查了你的小提琴，做了一些细微的改动，它工作得非常完美。用正确的js代码更新了我的回复。

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

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();
}*/