0

誰でもこの問題で私を助けることができます。

タブの div の外でこのコードを使用すると正常に動作しますが、内部では表示されません。

echo '<div id="product-desc">'.$obj->product_desc.'</div>';

ページのスクリプトは次のとおりです。

<?php
session_start();
include_once("config.php");
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
<link href="style/normalise.css" rel="stylesheet" type="text/css">
<link href="style/style.css" rel="stylesheet" type="text/css">

</head>
<body>

<div id="page-wrapper">
    <div id="product-page">

    <div id="wrapper">
<?php    

    $current_url = base64_encode($url="http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']);

    $results = $mysqli->query("select * from products where product_code='nikon002'");
    if ($results) 
    { 
        $obj = $results->fetch_object();

            echo '<div id="products-wrapper">'; 
                echo '<form method="post" action="cart_update.php">';

                echo '<div id="product-image"><img src="images/new folder/'.$obj->product_thumb_name.'"></div>';

                echo '<div id="product-name"><h3>PC '.$obj->product_name.'</h3></div>';

                echo '<div id="product-price">'.$currency.$obj->price.'</div>';

                echo '<div id="product-buybttn"><br><button class="add_to_cart">Buy</button></div>';

                echo '<div id="tabContainer">'; 

                    echo '<div id="tabs">'; 
                      echo '<ul>';  
                        echo '<li id="tabHeader_1">Summary</li>';   
                        echo '<li id="tabHeader_2">Details</li>';   
                        echo '<li id="tabHeader_3">Specifications</li>';    
                      echo '</ul>'; 
                    echo '</div>';  

                    echo '<div id="tabscontent">';  

                    echo '<div class="tabpage" id="tabpage_1">';    
                        echo '<h2>Summary</h2>';
                        echo '<p>im summary</p>';
                        echo '<div id="product-desc">'.$obj->product_desc.'</div>';
                        echo '<p>im summary</p>';
                    echo '</div>';  

                    echo '<div class="tabpage" id="tabpage_2">';    
                        echo ' <h2>Details</h2>';
                        echo '<p>ADFASFASFSAFA</p>';
                        echo '<div id="product-desc">'.$obj->product_desc.'</div>';
                    echo '</div>';  

                    echo '<div class="tabpage" id="tabpage_3">';    
                        echo '  <h2>Specifications</h2>';   
                        echo '<div id="product-desc">'.$obj->product_desc.'</div>';
                    echo '</div>';  

                echo ' </div>'; 
         echo ' </div>';    
       echo ' </div>';  
       echo ' </div>';  
echo '<script src="tabs_old.js"></script>'; 

            echo '</div>';  
        echo '</div>';

    }
        ?>

</div>

そして、ここにJavaScriptコードがあります：

window.onload=function() {

  // get tab container
    var container = document.getElementById("tabContainer");
        var tabcon = document.getElementById("tabscontent");
        //alert(tabcon.childNodes.item(1));
    // set current tab
    var navitem = document.getElementById("tabHeader_1");

    //store which tab we are on
    var ident = navitem.id.split("_")[1];
        //alert(ident);
    navitem.parentNode.setAttribute("data-current",ident);
    //set current tab with class of activetabheader
    navitem.setAttribute("class","tabActiveHeader");

    //hide two tab contents we don't need
     var pages = tabcon.getElementsByTagName("div");
        for (var i = 1; i < pages.length; i++) {
         pages.item(i).style.display="none";
        };

    //this adds click event to tabs
    var tabs = container.getElementsByTagName("li");
    for (var i = 0; i < tabs.length; i++) {
      tabs[i].onclick=displayPage;
    }
}

// on click of one of tabs
function displayPage() {
  var current = this.parentNode.getAttribute("data-current");
  //remove class of activetabheader and hide old contents
  document.getElementById("tabHeader_" + current).removeAttribute("class");
  document.getElementById("tabpage_" + current).style.display="none";

  var ident = this.id.split("_")[1];
  //add class of activetabheader to new active tab and show contents
  this.setAttribute("class","tabActiveHeader");
  document.getElementById("tabpage_" + ident).style.display="block";
  this.parentNode.setAttribute("data-current",ident);
}
</body>
</html>

解決策は非常に単純に違いないと確信していますが、プログラミング初心者としては理解できません!

前もって感謝します！

4

0 に答える 0