1

例として次のコードがあります。

<html>
<head>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript">
function showonlyone(thechosenone) {
     $('.newboxes').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).show(200);
          }
          else {
               $(this).hide(600);
          }
     });
}
</script>

</head>

<body>

             <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
                <a id="myHeader1" href="javascript:showonlyone('newboxes1');" >show this one only</a>
             </div>
             <div class="newboxes" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px; width: 150px;">Div #1</div>


             <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
                <a id="myHeader2" href="javascript:showonlyone('newboxes2');" >show this one only</a>
             </div>
             <div class="newboxes" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #2</div>

             <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
                <a id="myHeader3" href="javascript:showonlyone('newboxes3');" >show this one only</a>
             </div>
             <div class="newboxes" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #3</div>

</body>
</html>

別のページで、ユーザーがその外部リンクをクリックしてページをロードしたときにDiv #2を表示するリンクが必要です。URLを何らかの調整することで、そのようなことが可能になると思いますか? 例: domain.com/page.php?=showdiv2

私のコーディングに関する知識は限られています (特に PHP の場合)。

4

5 に答える 5

1

ここでやりたいことを達成する方法はたくさんあります。でできる方法を説明します$_GET。

これは変数で制御でき$_GETます (URL の末尾に、変数の名前 (これは任意です) と、変数?varName=valueに割り当てたい値を追加するだけです)。varNamevalue

次に、PHP コードで、a)存在するかどうかを確認し、b)その値に基づいてロジックを実行することで、この変数にアクセスできます。

<?php
    $divToShow = isset($_GET['div']) ? $_GET['div'] : "";

    //logic here
?>

たとえば、<div id="div_2">表示したい場合は、次のように書いてこれを jQuery にプラグインできます。

<script language="javascript" type="text/javascript">
    $("div#div_<?= $divToShow ?>").show();
    $("div:not(#div_<?= $divToShow ?>)").hide();
</script>

または、単純に div # 2 のみを出力するよう PHP に強制することもできます。

<?php
// set $divId to a value

if ($divId == $divToShow) : ?>
    <div id="<?= $divId ?>">
        <!-- content here -->
    </div>
<?php endif; ?>
于 2012-08-03T19:42:39.113 に答える
1

いつものように多くの解決策がありますが、あるページから別のページにメッセージを送信してユーザーに表示するアプリケーションにも同様の要件があります。たとえば、設定を更新した後、上部に「設定が更新されました」というメッセージが表示されたメイン ページに戻ります。私たちの解決策は、URL でメッセージを送信し、URL でメッセージを検索するすべてのページの読み込みで実行される JavaScript を用意することでした。存在する場合はユーザーに表示され、存在しない場合は何も起こりません。

共通の pageLoad ルーチン (すべてのページの JavaScript) では、

if (jQuery.query.get('fadeMessage'))
{
    FadeMessage(jQuery.query.get('fadeMessage'));
}

そして、FadeMessage は次のように定義されます。

function FadeMessage(message) {
jQuery('#fadeMessage').html(message).animate({ "top": "0" }, 1000).delay(2000).animate({ "top": "-80px" }, 1000);

}

「fadeMessage」div は次のようにすべてのページにあります。

<div id="fadeMessage">
</div>

これを入力しているときは、必要なときにその div を挿入できると考えています。うーん... :-)

于 2012-08-03T19:48:17.700 に答える
1

実行する手順は 2 つあります。最初に、ドメインでパラメーターを使用する方法を知る必要があり、最後にコンテンツを切り替える必要があります。

1) 次のように、呼び出されたファイルにパラメーターを追加できます。

http://server/path/file?key=value

この例では、キーを使用しましょうpage。したがって、これらはリンクする必要がある URL になります。

http://server/path/file?page=div-1
http://server/path/file?page=div-2

2) コードを、現在そこにあるすべてのものを含む 1 つの php ファイルと、任意の名前の div-1.php および div-2.php などの 2 つの php ファイルに分割します。後者には、特定の div-1 および div-2 コンテンツをコピーします。

3) 最後に、メインの php ファイルを開き、div-1 と div-2 を削除します。それらは両方とも他のファイルにあるはずです。そして、次の php コードを入力します。

<?php
if (isset($_REQUEST['page']) === false || in_array($_REQUEST['page'], array('div-1', 'div-2')) === false) {
    $_REQUEST['page'] = 'div-1';
}
include $_REQUEST['page'] . '.php';
?>

その URL は php ファイルを呼び出し、そのコンテンツをブラウザーにプッシュし、プッシュ中に入力したスクリプトを実行します。スクリプトは、url パラメーター ページが設定されているかどうかを確認し、それが有効かどうかを確認し、2 番目のファイルを指定した場所にプッシュします。スクリプトを前に置きます。後者のチェックは、セキュリティ上の理由から非常に必要です (以下を参照)。

注: 次のコード行は、デフォルト ページを表示するために使用されます (例:indexまたは ) start。簡単に変更できます。

$_REQUEST['page'] = 'div-1';

注: セキュリティに配慮する必要があるため、存在しないページは許可されません。そうしないと、サーバー上のさまざまな php スクリプトが実行される可能性があります。上記の if ステートメント内の配列に要素を変更、編集、または追加するだけです。

array('div-1', 'div-2')
于 2012-08-03T19:52:32.253 に答える
1

次のようなPHPでコーディングします。

page.php?id=idofdiv

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function showonlyone(thechosenone) {
 $('.newboxes').each(function(index) {
      if ($(this).attr("id") == thechosenone) {
           $(this).show(200);
      }
      else {
           $(this).hide(600);
      }
 });
}
$(document).ready(function(){
$("#<?php echo $_GET['id']; ?>").show();
});
</script>
</head>
<body>

         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
            <a id="myHeader1" href="javascript:showonlyone('newboxes1');" >show this one only</a>
         </div>
         <div class="newboxes" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px; width: 150px;">Div #1</div>


         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
            <a id="myHeader2" href="javascript:showonlyone('newboxes2');" >show this one only</a>
         </div>
         <div class="newboxes" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #2</div>

         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
            <a id="myHeader3" href="javascript:showonlyone('newboxes3');" >show this one only</a>
         </div>
         <div class="newboxes" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #3</div>

私がやったことは次のとおりです。

$(document).ready(function(){
$("#<?php echo $_GET['id']; ?>").show();
});

PHP が (サーバー側で) 解析されると、URL で指定された ID ($_GET['id']) が送信され、jQuery コード内で解析されます。このコードは、ドキュメントの準備ができたときに実行されます。

$_GET['id'] が空の場合、または存在しない場合、何も起こりません (表示する div はありません)。

于 2012-08-03T19:45:43.383 に答える
0

ページの読み込み時に URL のハッシュ部分をチェックするだけで、Javascript/jQuery を使用してこれを行うことができます。

http://mydomain.com/some/path#showcontainer1

HTML

<div class="container_one" style="display:none;">Content</div>
<div class="container_two" style="display:none;">Other Content</div>

JS

$(function(){

  switch( window.location.hash ){
    case '#showcontainer1':  //if hash is #showcontainer1
      $('.container_one').fadeIn();   //fadein the container with some class 
      break;
    default:
      $('.container_two').fadeIn()   //else fade container with other class
      break;
  }

});
于 2012-08-03T19:44:31.323 に答える