0

ここで直面している問題は、リンクをクリックしても右側の列の div の内容を変更できないことです。リンクをクリックしても何も変更されません。これまでのところ、次のコードを実行しました。

機能していないため、どこが間違っているのか正確にはわかりません。以前のコンテンツを新しいコンテンツに置き換える必要があります。私は初めての JQuery を使用しています。また、質問を投稿する際に、stackoverflow.com によって提案されたさまざまなリンクを調べましたが、どのように使用すればよいか正確にはわかりませんでした。どんな助けでもいただければ幸いです

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/temp.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Rise Cashew Temp About Us</title>
<style type="text/css">
body{
    background-colour: #999;
    text-align: center;
    margin: 0;
    background-color: #FFF;
}

.wrapper{
    background-colour: #FFF;
    margin: 0 auto;
    width: 960px;
    text-align: left;
    background-color: #FFF;
}

.header{
width:604px;
height:145px;
padding-top:5px;
padding-left:356px;
background:url(header.gif) repeat-x top;    
}

#rotating-item-wrapper {
    position: relative;
    width: 596px;
    height: 351px;
}
.rotating-item {
    display: none;
    position: absolute;
    top: 0;
    left: 0;

}
h1{
width:241px;
height:136px;
margin:0;
overflow:hidden;
background:url(logo.gif) no-repeat;
}

h1 a:link,h1 a:hover,h1 a:visited,h1 a:active{
display:block;
width:241px;
height:136px;
}
#nav_body {
    margin-left: 20px;
    margin-top: 5px;
    margin-right: 20px;
    margin-bottom: 20px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
}
/* === Nav === */
#bav{
    background:url(navbg-repeat.jpg) repeat-x top;
    height:56px;
    width:100%;
    margin:2px 0;
    position:relative;z-index:999;
}
#bav .inner{
    width:100%;z-index:999;
    height:56px;
    background:url(navbg-middle.jpg) top center no-repeat;
}
#bav ul {
    font-size:18px;
    padding: 5px 0 0 30px;
    margin: 7px 0;
    list-style: none;
    float: left;
    text-shadow:1px 1px white;
    z-index:999;
}
#bav ul li{
    display:inline;
    float:left;
    z-index:100;
}
#bav ul li a:link, #bav ul li a:visited{
    display:inline;
    color:#525252;
    display:block;
    text-decoration:none;
    height:44px;
}
#bav ul li a:hover{
    display:inline;
    color:#00578C;
    background:url(bgright.jpg) no-repeat top right    ;
    display:block;
    text-decoration:none;
    height:44px;
}
#bav ul li a.current{
        background:url(bgright.jpg) no-repeat top right    ;
        height:44px;
}
#bav ul li a.active{
        background:url(bgright.jpg) no-repeat top right    ;
        height:44px;
}
#bav ul li a.current span.link,#bav ul li a.active span.link, #bav ul li a:hover span.link {
    background: url(bgleft.jpg) no-repeat top left;
}
#bav ul li a span.link {
    margin: 0 18px 0 0px;
    padding: 12px 8px 14px 18px;
    position: relative; /*To fix IE6 problem (not displaying)*/
    float:left;
    cursor:pointer;
}
/* === Dropdown Nav === */
#bav ul ul {
position:absolute;
display:none;
top:37px;
z-index:9999;
background:#d0d2d3;
padding:5px;
border:1px solid #00578C;
width:170px;
}
ul#bav ul ul li{
background:none;
padding:0;
margin:0;
z-index:999;
}
#bav ul li ul li{
    background:none;
    border-top:1px solid #fff;
    border-bottom:1px solid #e4e4e4;
    z-index:999;
    padding:0;margin:0
}
#bav ul li ul a:link, #bav ul li ul a:visited{
display:block;
padding:10px 0 8px 10px;
width:160px;
font-size:12px;
color:#333;
text-decoration:none;
font-weight:normal;
background:#fff;
float:left;
margin:0;z-index:999;
height:16px;
}
#bav ul li ul a:hover{
display:block;
width:160px;
text-decoration:none;
font-weight:bold;
font-size:12px;
float:left;z-index:999;
background:#fff;
/*url(images/bav-submenu.jpg) repeat-x bottom #fff;*/
}

#bav ul ul ul{
top:auto;z-index:999;
}   

#bav ul li ul ul {
left:146px;
margin:0px 0 0 10px;
z-index:9999;
}
#bav ul li{
        position:relative;
}

/* === Container === */
#container{
    overflow:auto;
    width:950px;
    margin:0 auto;
    padding-right:5px;
    padding-left:5px;
    padding-top:5px;
    padding-bottom:5px;
    background:url(cont.gif);
}

/* === Content === */
#content{
    width: 940px;
    overflow:auto;
    /*height: 355px;*/
    margin: 0 auto;
    padding: 5px;
    background-color: #FFF; 
}

/* === Left Column === */
#leftcolumn{
    width:260px;
    /*height:290px;*/
    overflow:auto;
    float:left;
    padding-right:20px;
    padding-left:20px;
    padding-top:20px;
    padding-bottom:20px;
    background:#FFF;
    border-style:solid;
    border-color:#999;
}

 #left_cont{

    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
}
.not{
    padding:0;
    margin:0;
    list-style:none;
    width:200px;
}
.not li a{
    background:url(not-lnk.jpg) repeat-x top;
    height:31px;
    display:block;
    padding:12px 0 0 20px;
    font-size:18px;
    font-weight:bold;
    color:white;
    text-decoration:none;
}
#leftcolumn_h1{
    font-family: "Harrington", sans-serif;
    font-size:36px;
    font-weight: bold;
    color: #525252; 
}
#leftcolumn_h2{
    padding-left:5px;
    font-family: "Agency FB", sans-serif;
    font-size: xx-large;
    font-weight: bolder;
    color:#00578C;  
}
#leftcolumn_content{
    font-family: "Lucida Calligraphy", sans-serif;
    font-size: 18px;
    font-style: italic;
    color:#000;
    font-weight:bold
}
/* === Right Column === */
#rightcolumn{
    width:591px;
    overflow:auto;
    /*height:351px;*/
    float:right;
    padding:5px;
    background:#FFF;
}
#rightcol_h1{
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    color: #00578C;
    font-weight: bold;
}
#rightcol_cont{
    font-size:14px;
    font-family:Arial, Helvetica, sans-serif;
    color: #00578C;
    font-weight:normal;
}
#link1{
    font-size:14px;
    font-family:Arial, Helvetica, sans-serif;
    color: #00578C;
    font-weight:normal;
}
/* === Footer === */    
#footer{
    width:940;
    height:80px;
    margin:0 auto;
    background:#00578C;
    text-align:center;
    padding-top:10px;

}
#footer ul{
    list-style: none;
    margin: 20px 0 0 0;
    padding: 0;
    font-size: large;
}
#footer ul li{
    display:inline;
    margin-right:5px;
    color:#666;
}
#footer ul li a{
    border-right:thin #666;
    text-decoration:none;
    color:#000;
}
#footer ul li a:hover{
    text-decoration:bold;
    text-transform:uppercase;

}
#footer p{
    font-weight: bold;
    font-size: 14px;
}
.clear{
    clear:both;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery.easing.compatibility.js"></script>
<script type="text/javascript">
function mainmenu(){
$("#bav .inner ul ul").css({display: "none"}); // Opera Fix
$("#bav .inner ul li").hover(function(){
        $(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(400, 'backout');
        },function(){
        $(this).find('ul:first').css({visibility: "hidden"});
        });
}
$(document).ready(function() {
                           mainmenu();
            });
/*<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=3.0.1">*/
</script><script type="text/javascript" src="infinite-rotator.js"></script>
<script type="text/javascript" src="cufon-yui.js"></script>
<script type="text/javascript" src="Myriad_Pro_400-Myriad_Pro_700-Myriad_Pro_italic_400-Myriad_Pro_italic_700.font.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".not li").hover(function(){
        $('.not li').not(this).stop().animate({ opacity: 0.4 }, 400);
        },function(){
        $('.not li').not(this).stop().animate({ opacity: 1 }, 400);
        });

これはjquery関数です 

 $("#vision").click(function(){

        $("rightcol_h1").html("Hello <b>world!</b>");
        });
$("#mission").click(function(){
    $("rightcolumn").html("hi <b>there!</b>");
        });
            });
Cufon.replace('.not li a',{
textShadow: 'black 1px 1px',
hover: 'true'
});
</script>

  </script>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>

<body>
<div class="wrapper">
<div class="header">
     <h1><a href="#"><img src="logo.gif" name="logo.gif" width="241" height="135" id="Insert_logo" /></a></h1>
     </div><!--header div-->
<div id="nav_body">
      <div id="bav"><div class="inner"><!-- InstanceBeginEditable name="EditRegion5" -->
        <ul>
          <li><a href="exp.html"><span class="link">home</span></a> </li>
          <li><a href="aboutus.html" class="current"><span class="link">about us</span></a>
            <ul>
              <li><a href="">Vision</a></li>
              <li><a href="">Mission</a></li>
            </ul>
          </li>
          <li><a href="spec.html"><span class="link">specifications</span></a>
            <ul>
              <li><a href="">some other link</a></li>
              <li><a href="">drop down link example</a></li>
              <li><a href="">add anything</a></li>
              <li><a href="">this will hopefully work</a></li>
            </ul>
          </li>
          <li><a href="rawmat.html"><span class="link">raw materials</span></a>
            <ul>
              <li><a href="">some other link</a></li>
              <li><a href="">drop down link example</a></li>
              <li><a href="">add anything</a></li>
              <li><a href="">this will hopefully work</a></li>
            </ul>
          </li>
          <li><a href="products.html"><span class="link">products</span></a>
            <ul>
              <li><a href="">some other link</a></li>
              <li><a href="">drop down link example</a></li>
              <li><a href="">add anything</a></li>
              <li><a href="">this will hopefully work</a></li>
            </ul>
          </li>
          <li><a href="blog.html"><span class="link">enquiry</span></a> </li>
          <li><a href="contact.html"><span class="link">contact us</span></a></li>
        </ul>
      <!-- InstanceEndEditable -->
        <div class="clear"></div><!--clear div-->
      </div><!--inner div-->
      </div><!--bav div-->
    </div><!--nav_body div-->

    <div id="container">
     <div id="content">

      <div id="leftcolumn"><!-- InstanceBeginEditable name="leftcol_edit" -->
     <ul class="not">
     <div id="vision">
        <li><a href="#vision" target="_self">Vision</a></li>
     </div>
     <div id="mission">
        <li><a href="#">Mission</a></li>
     </div>
</ul>
      <!-- InstanceEndEditable --></div><!--leftcolumn div-->

    <div id="rightcolumn"> 
      <!-- InstanceBeginEditable name="rightcol_edit" --> 
      <div id="rightcol_h1">
      ABOUT US
      </div>
      <p></p>
      <div id="rightcol_cont">
       Rise Cashew Company is a India based SME currently operating two manufacturing units and support activities at different locations. 

      <p></p>

       Rise Cashew Company is engaged in the manufacture and export of Cashew Kernels. 

        <p></p>

      The primary product is cashew kernels and the emphasis has been on differentiation to make our cashew kernels unique and peculiar. This is based on selection of seed, geographical origin techniques, in-process quality control and quality management systems, product and process innovation, good packaging and presentation and up-gradation of facilities .

       <p></p> 

       <p>At Rise Cashew Company,we aim to develop successful and longstanding business relationship with our customers and provide the best level of service. We aim to develop successful and longstanding business relationship with our customers and provide the best level of service. Every shipment is done as per instructions of the buyers with our senior quality experts supervising from the stage of processing until the container is sealed.      </p>
      </div> 
      <!-- InstanceEndEditable --></div><!--rightcolumn div-->
    </div><!--content div-->
    </div><!--container div--> 
  <p></p>
  <div id="footer">
  <ul>
     <li><a href="index.html">home</a></li>
     <li><a href="about.html">about us</a></li>
     <li><a href="portfolio.html">products</a></li>
     <li><a href="about.html">recipes</a></li>
     <li><a href="about.html">advantages</a></li>
   </ul>
   <p>&copy;Rise Cashew company</p>
    </div><!--footer div-->
    </div><!--wrapper div-->  
</body>
<!-- InstanceEnd --></html>

これは aboutus ページのテンプレートです。

4

1 に答える 1

2

ID をターゲットにしているため、 $("rightcol_h1") を $("#rightcol_h1") に変更するだけでよいようです。その # 記号がなければ、次のようなすべての要素をターゲットにしていることになります。

于 2013-05-11T15:05:07.253 に答える